Cách sử dụng @next/phông chữ để tối ưu hóa phông chữ trong Next.js
Bạn có thể muốn sử dụng phông chữ tùy chỉnh để làm cho ứng dụng Next.js của mình hấp dẫn hơn về mặt hình ảnh. Sử dụng phông chữ tùy chỉnh có thể cải thiện đáng kể giao diện trang web của bạn, nhưng nó cũng có thể làm chậm hiệu suất trang web của bạn nếu không được tối ưu hóa đúng cách. Các @tiếp theo/phông chữ gói là một giải pháp cho vấn đề này.
Gói @next/font cung cấp một cách đơn giản và hiệu quả để tối ưu hóa việc tải phông chữ trong Next.js, cải thiện thời gian tải trang và hiệu suất tổng thể. Bài viết này cung cấp thông tin về cách sử dụng @next/phông chữ trong dự án Next.js của bạn.
Mục Lục
Cài đặt gói
Bạn có thể cài đặt @tiếp theo/phông chữ gói bằng cách chạy lệnh sau trong thiết bị đầu cuối của bạn:
npm install @next/font
Nếu bạn đang sử dụng sợi, bạn có thể cài đặt gói bằng cách chạy lệnh này:
yarn add @next/font
Sử dụng @next/phông chữ để tối ưu hóa Google Fonts
Các @tiếp theo/phông chữ gói tối ưu hóa việc sử dụng các phông chữ của Google. Các @tiếp theo/phông chữ tự động lưu trữ phông chữ Google trên máy chủ Next.js để không có yêu cầu nào được gửi tới Google để lấy phông chữ.
Để sử dụng phông chữ Google trong ứng dụng của bạn, bạn sẽ nhập phông chữ dưới dạng hàm từ @tiếp theo/phông chữ/google vào _app.js tập tin trong trang danh mục:
import { Roboto } from '@next/font/google'const roboto = Roboto({ subsets: ['latin'] })
export default function MyApp({ Component, pageProps }) {
return (
<Component {...pageProps} />
)
}
Trong khối mã ở trên, bạn đã tạo một phông chữ biến đổi bằng cách sử dụng người máy chức năng phông chữ. Các tập hợp con thuộc tính tập hợp phông chữ thành các ký tự Latinh một mình; nếu bạn sử dụng ngôn ngữ khác, bạn có thể đặt phông chữ phụ cho ngôn ngữ đó.
Bạn cũng có thể chỉ định độ dày của phông chữ cùng với kiểu phông chữ khi xác định phông chữ:
const roboto = Roboto(
{
subsets: ['latin'],
weight: '400',
style: 'italic'
}
)
Bạn chỉ định nhiều trọng lượng phông chữ và kiểu phông chữ bằng cách sử dụng mảng.
Ví dụ:
const roboto = Roboto(
{
subsets: ['latin'],
weight: ['400', '500', '700'],
style: ['italic', 'normal']
}
)
Tiếp theo, bạn sẽ bọc các thành phần của mình trong một chủ yếu gắn thẻ và chuyển phông chữ dưới dạng một lớp cho chủ yếu nhãn:
import { Roboto } from '@next/font/google'const roboto = Roboto(
{
subsets: ['latin'],
weight: ['400', '500', '600'],
style: ['italic', 'normal']
}
)
export default function MyApp({ Component, pageProps }) {
return (
<main className={roboto.className}>
<Component {...pageProps} />
</main>
)
}
Kết xuất ứng dụng của bạn với khối mã ở trên sẽ áp dụng phông chữ cho toàn bộ ứng dụng của bạn. Ngoài ra, bạn có thể áp dụng phông chữ cho một trang. Để làm điều này, bạn thêm phông chữ vào một trang cụ thể.
Như vậy:
import { Roboto } from '@next/font/google'const roboto = Roboto(
{
subsets: ['latin'],
weight: ['400', '500', '600'],
style: ['italic', 'normal']
}
)
export default function Home() {
return (
<div className={roboto.className}>
<p>Hello There!!!</p>
</div>
)
}
Sử dụng @next/phông chữ để tối ưu hóa phông chữ cục bộ
Các @tiếp theo/phông chữ gói cũng tối ưu hóa việc sử dụng phông chữ cục bộ. Kỹ thuật tối ưu hóa phông chữ cục bộ thông qua @tiếp theo/phông chữ gói khá giống với việc tối ưu hóa phông chữ của Google, với những khác biệt nhỏ.
Để tối ưu hóa phông chữ cục bộ, hãy sử dụng localFont chức năng được cung cấp bởi @tiếp theo/phông chữ bưu kiện. Bạn nhập khẩu localFont chức năng từ @tiếp theo/phông chữ/cục bộ và sau đó xác định phông chữ biến của bạn trước khi sử dụng phông chữ trong ứng dụng Next.js của bạn.
Như vậy:
import localFont from '@next/font/local'const myFont = localFont({ src: './my-font.woff2' })
export default function MyApp({ Component, pageProps }) {
return (
<main className={myFont.className}>
<Component {...pageProps} />
</main>
)
}
Bạn xác định phông chữ biến myFont sử dụng localFont chức năng. Các localFont hàm lấy một đối tượng làm đối số của nó. Đối tượng có một thuộc tính duy nhất, srcđược đặt thành đường dẫn tệp của tệp phông chữ trong WOFF2 định dạng “./my-font.woff2”.
Bạn có thể sử dụng nhiều tệp phông chữ cho một họ phông chữ. Để làm điều này, bạn đặt src thành một mảng chứa các đối tượng có phông chữ khác nhau và các thuộc tính của chúng.
Ví dụ:
const myFont = localFont(
{
src: [
{
path: './Roboto-Regular.woff2',
weight: '400',
style: 'normal',
},
{
path: './Roboto-Italic.woff2',
weight: '400',
style: 'italic',
},
{
path: './Roboto-Bold.woff2',
weight: '700',
style: 'normal',
},
{
path: './Roboto-BoldItalic.woff2',
weight: '700',
style: 'italic',
},
]
}
)
Sử dụng @next/phông chữ với Tailwind CSS
Để sử dụng @tiếp theo/phông chữ gói với Tailwind CSS, bạn cần sử dụng các biến CSS. Để làm điều này, bạn sẽ xác định phông chữ của mình bằng Google hoặc phông chữ cục bộ, sau đó tải phông chữ của bạn bằng tùy chọn biến để chỉ định tên biến CSS.
Ví dụ:
import { Inter } from '@next/font/google'const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
})
export default function MyApp({ Component, pageProps }) {
return (
<main className={`${inter.variable} font-sans`}>
<Component {...pageProps} />
</main>
)
}
Trong khối mã ở trên, bạn đã tạo phông chữ, chôn cất, và đặt biến thành –font-inter. Các tên lớp của phần tử chính sau đó được đặt thành biến phông chữ và font-sans. Các liên biến lớp sẽ áp dụng chôn cất phông chữ vào trang, và font-sans class sẽ áp dụng phông chữ sans-serif mặc định.
Tiếp theo, bạn thêm biến CSS vào file cấu hình tailwind tailwind.config.cjs:
module.exports = {
content: ["./index.html",
"./src/**/*.{js,ts,jsx,tsx}",],
theme: {
extend: {
fontFamily: {
sans: ['var(--font-inter)'],
},
},
},
plugins: [],
}
Bây giờ bạn có thể áp dụng phông chữ trong ứng dụng của mình bằng cách sử dụng font-sans lớp học.
Tối ưu hóa phông chữ với @next/font
Gói @next/font là một cách đơn giản và hiệu quả để tối ưu hóa việc tải phông chữ trong Next.js. Gói này đảm bảo rằng các phông chữ tùy chỉnh của bạn được tải một cách hiệu quả, cải thiện hiệu suất trang web và trải nghiệm người dùng của bạn. Bài viết này cung cấp thông tin về cách thiết lập gói @next/phông chữ và sử dụng nó trong ứng dụng Next.js của bạn. Bạn có thể cải thiện hơn nữa hiệu suất trang web của mình bằng cách tối ưu hóa hình ảnh.