Home-theater-designers
Phông chữ web là một cách tuyệt vời để thêm phông chữ tùy chỉnh vào trang web của bạn. Những phông chữ này có thể không có sẵn trên hệ thống của người dùng, vì vậy bạn cần đưa chúng vào dự án của mình bằng cách lưu trữ chúng hoặc tham khảo chúng qua CDN.
Tìm hiểu cách đưa phông chữ web vào trang web Next.js bằng hai phương pháp này.
LÀM VIDEO TRONG NGÀY
Sử dụng Phông chữ Tự Lưu trữ trong Next.js
Để thêm phông chữ tự lưu trữ trong Next.js, bạn cần sử dụng quy tắc @ font-face CSS . Quy tắc này cho phép bạn thêm phông chữ tùy chỉnh vào trang web.
Trước khi sử dụng font-face, bạn phải tải xuống các phông chữ mà bạn muốn sử dụng. Có nhiều các trang web trên internet cung cấp phông chữ miễn phí , bao gồm các phông chữ, fontspace và các trang web dafont của Google.
Sau khi bạn tải xuống phông chữ web, hãy chuyển đổi chúng sang các định dạng phông chữ khác nhau để hỗ trợ nhiều trình duyệt. Bạn có thể dùng công cụ chuyển đổi phông chữ trực tuyến miễn phí làm như vậy. Các trình duyệt web hiện đại hỗ trợ các định dạng .woff và .woff2. Nếu bạn cần hỗ trợ các trình duyệt cũ, bạn cũng nên cung cấp các định dạng .eot và .ttf.
Tạo một thư mục mới có tên phông chữ trong thư mục trang web của bạn và lưu các tệp phông chữ đã chuyển đổi của bạn ở đó.
ví bảo vệ thẻ tín dụng của bạn
Bước tiếp theo là đưa các mặt phông chữ vào styles / global.css để cung cấp chúng cho toàn bộ trang web. Ví dụ này hiển thị các mặt phông chữ cho phông chữ nàng tiên cá được in đậm:
cách cài đặt hệ điều hành mac trong hộp ảo
@font-face {
font-family: 'Mermaid';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') format('embedded-opentype'),
url('Mermaid-Bold.woff2') format('woff2'),
url('Mermaid-Bold.woff') format('woff'),
url('Mermaid-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
Khi bạn đã bao gồm các tệp phông chữ, bạn có thể sử dụng các phông chữ đó trong tệp CSS cấp thành phần:
h1 {
font-family: Mermaid;
}Bao gồm Phông chữ Web sang Next.js thông qua CDN
Một số trang web cung cấp phông chữ web thông qua CDN mà bạn có thể nhập vào ứng dụng của mình. Cách tiếp cận này dễ thiết lập vì bạn không cần tải xuống phông chữ hoặc tạo mặt phông chữ. Ngoài ra, nếu bạn sử dụng phông chữ Google hoặc TypeKit, Next.js sẽ tự động xử lý tối ưu hóa.
Bạn có thể thêm phông chữ từ CDN bằng thẻ liên kết hoặc quy tắc @import bên trong tệp CSS.
Cách nhập phông chữ vào dự án Next.js bằng thẻ liên kết
Thẻ liên kết luôn nằm bên trong thẻ head của tài liệu HTML. Để thêm thẻ head trong Next.js, bạn phải tạo một tài liệu tùy chỉnh. Tài liệu này sửa đổi thẻ head và body được sử dụng để hiển thị mỗi trang.
Bắt đầu sử dụng tính năng tài liệu tùy chỉnh này bằng cách tạo tệp /pages/_document.js.
Sau đó, bao gồm liên kết đến phông chữ trong phần đầu của tệp _document.js.
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;Cách sử dụng Quy tắc @import để Bao gồm Phông chữ trong Dự án Next.js
Một tùy chọn khác là sử dụng quy tắc @import trong tệp CSS mà bạn muốn sử dụng phông chữ.
Ví dụ: cung cấp phông chữ trên toàn bộ dự án bằng cách nhập phông chữ web vào styles / global.css tập tin.
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');
Bây giờ bạn có thể tham chiếu họ phông chữ trong một Bộ chọn CSS như thế này:
h1 {
font-family:'Libre Caslon Display', serif;
}Quy tắc @import cho phép bạn nhập phông chữ trong tệp CSS chứa. Sử dụng thẻ liên kết làm cho phông chữ có thể truy cập được trên toàn bộ trang web.
cách phát hiện phần mềm độc hại trên iphone
Bạn nên lưu trữ Phông chữ cục bộ hay Nhập chúng qua CDN?
Phông chữ được lưu trữ cục bộ thường nhanh hơn phông chữ được nhập từ CDN. Điều này là do trình duyệt không phải thực hiện yêu cầu bổ sung đối với CDN phông chữ khi trang web đã tải.
Nếu bạn muốn sử dụng các phông chữ đã nhập, hãy tải trước chúng để cải thiện hiệu suất của trang web. Nếu các phông chữ có sẵn trên Google phông chữ hoặc Typekit, bạn có thể nhập chúng và tận dụng các tính năng tối ưu hóa của Next.js.