ดาวน์โหลด next google fonts - ดาวน์โหลดซอร์สโค้ด next google fonts

next google fonts

โค้ดแหล่งที่มา AI

v2.2.0

ดาวน์โหลด

โครงการนี้เลิกใช้แล้ว

ณ ถัดไป JS 10.2 Google Fonts จะได้รับการปรับให้เหมาะสมโดยอัตโนมัติหรือไม่

ขอบคุณสำหรับความรักและการสนับสนุนสำหรับโครงการนี้
โจ

บรรยากาศ

ตัวช่วย next/head เล็กสำหรับโหลด Google Fonts อย่างรวดเร็ว และ แบบอะซิงโครนัส ⏩

ใช้ next.js 10? ดู "สิ่งนี้เปรียบเทียบกับการเพิ่มประสิทธิภาพแบบอักษร next.js ได้อย่างไร" ก่อนดำเนินการต่อ

สารบัญ

การตั้งค่า
คำถามที่พบบ่อย

การตั้งค่า

ในตัวอย่างนี้เราจะเพิ่ม Inter (โดยเฉพาะน้ำหนัก 400 และ 700 ) ลงในแอปถัดไป JS

ดู joebell.co.uk สำหรับตัวอย่างการทำงาน

เพิ่มแพ็คเกจลงในโครงการ next.js ของคุณ:
```
npm i next-google-fonts
```

สร้างองค์ประกอบ Head ที่กำหนดเอง

เป็นสิ่งสำคัญที่จะต้องรับทราบว่า next-google-fonts เป็นองค์ประกอบ next/head ขนาดเล็กและ ไม่ ควรซ้อนกันภายใน next/head ในการแก้ปัญหานี้ให้ห่อส่วนประกอบทั้งสองด้วย Fragment

 // components/head.js
import * as React from "react" ;
import NextHead from "next/head" ;
import { GoogleFonts } from "next-google-fonts" ;

export const Head = ( { children , title } ) => (
  < React . Fragment >
    < GoogleFonts href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;700 & display = swap " />
    < NextHead >
      < meta charSet = "UTF-8" />
      < meta
        name = "viewport"
        content = "width=device-width, initial-scale=1.0"
      />
      < meta httpEquiv = "x-ua-compatible" content = "ie=edge" />

      < title > { title } </ title >

      { children }
    </ NextHead >
  </ React . Fragment >
) ;

เพิ่ม Google Font/S ที่ร้องขอในสไตล์ของคุณด้วยทางเลือกที่เหมาะสม ไม่สำคัญว่าคุณจะใช้ CSS หรือ SASS หรือ CSS-in-JS:
```
 body {
  font-family : "Inter" , sans-serif;
}
```
เรียกใช้แอป Next.js ของคุณเพื่อดูผลลัพธ์ในการดำเนินการ!
คุณควรคาดหวังว่าจะเห็นตัวอักษรทางเลือกก่อนตามด้วยการสลับไปที่ Google Font/S โดยไม่ต้องมีคำเตือน CSS ที่ปิดกั้นใด ๆ ตัวอักษร/S ของคุณจะแสดงต่อไปจนกว่าแอปของคุณจะได้รับความชุ่มชื้นอีกครั้ง
หาก JS ถูกปิดใช้งานจะมีเพียงฟอนต์ทางเลือกเท่านั้นที่จะแสดง

คำถามที่พบบ่อย

สิ่งนี้เปรียบเทียบกับการเพิ่มประสิทธิภาพแบบอักษร next.js ได้อย่างไร
ทำไม

สิ่งนี้เปรียบเทียบกับการเพิ่มประสิทธิภาพแบบอักษร next.js ได้อย่างไร

Next.js 10 แนะนำการเพิ่มประสิทธิภาพ Google Font โดยอัตโนมัติคุณสามารถตัดสินใจได้ว่าจะใช้โซลูชันใดตามเกณฑ์ต่อไปนี้:

"แบบอักษรของฉัน ไม่สำคัญ และสามารถโหลด แบบอะซิงโครนัสได้ "-ใช้ next-google-fonts
"ฟอนต์ของฉัน มีความสำคัญ และ ไม่ ควรโหลด แบบอะซิงโครนัส " - ใช้การเพิ่มประสิทธิภาพแบบอักษร Next.js

สำหรับการอ่านเพิ่มเติมให้ดูที่การอภิปรายฉบับต่อไป

ทำไม

next-google-fonts มีจุดมุ่งหมายที่จะทำให้กระบวนการใช้ Google Fonts ใน Next.js สอดคล้องกันเร็วขึ้นและไม่เจ็บปวดมากขึ้น: มันเชื่อมต่อกับตัวอักษรสินทรัพย์ preloads และโหลดไฟล์ CSS แบบอะซิงโครนัส

ในการวนซ้ำปัจจุบันของ next/head เราไม่สามารถใช้วิธีการ "แฮ็คสื่อ" ที่คุ้นเคยของการโหลด Google แบบอะซิงโครนัส:

 <!-- Plain HTML -->
< link
  rel =" stylesheet "
  href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap "
  media =" print "
  onload =" this.media='all' "
/>