Cách xác định phông chữ tùy chỉnh trong CSS với @ font-face và font-display

@font-face là một luật tại CSS được sử dụng để xác định phông chữ tùy chỉnh . Với @font-face , bạn cung cấp đường dẫn đến file phông chữ được lưu trữ trên cùng một server với file CSS của bạn. Luật này đã tồn tại khá lâu, nhưng có một thuộc tính mới hơn, font-display , mang đến một cấp độ tùy chọn tải mới.

---

Trong hướng dẫn này, ta sẽ download phông chữ nguồn mở phổ biến, Roboto Mono và sử dụng @font-face để tải phông chữ trên trang web mẫu. Để tạo trải nghiệm user tốt nhất, sau đó ta sẽ sử dụng thuộc tính font-display để tùy chỉnh cách thức và thời điểm tải nó.

Yêu cầu

• Editor mã do bạn chọn, chẳng hạn như nano hoặc Visual Studio Code
• Một trình duyệt web
• Một sự thoải mái với các nguyên tắc cơ bản về HTML. Bạn có thể xem loạt bài hướng dẫn Cách Xây dựng Trang web bằng HTML để được giới thiệu.

Bước 1 - Download Phông chữ và Xây dựng Trang Web

Trước khi bắt đầu khám phá luật @font-face , hãy cài đặt một trang web và folder mẫu.

Từ một folder đang làm việc, hãy tạo một folder mới cho trang web của ta và một folder con cho các file phông chữ của ta :

mkdir -p ./website/fonts/ 

Điều hướng vào folder root của dự án mới của ta , website :

cd website 

Ta sẽ chạy tất cả các lệnh còn lại từ đây.

Bây giờ ta sẽ sử dụng lệnh curl để download phông chữ Roboto Mono. Ta đang sử dụng một ứng dụng phổ biến có tên là google-webfonts-helper , cho phép ta download nhiều phông chữ trực tiếp từ Mạng phân phối nội dung của Google trong một yêu cầu GET được gói gọn gàng .

Hãy download hai kiểu dáng và trọng lượng khác nhau của Roboto Mono, regular và 700italic :

curl -o ./fonts/fontfiles.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto-mono?download=zip&subsets=latin,latin-ext&variants=regular,700italic&formats=woff,woff2,ttf" 

Lưu ý cách ta chỉ định các variants mà ta muốn từ họ phông chữ Roboto Mono. Sau đó, ta chỉ định các formats mà ta muốn cho mỗi formats . Ta đang yêu cầu các định dạng ttf , woff và woff2 . Định dạng woff2 là định dạng phông chữ web hiện đại nhất, nhưng hỗ trợ cho woff2 vẫn còn thiếu trong một số trình duyệt . Do đó, ta cũng đang cung cấp một dự phòng ở định dạng woff , có hỗ trợ trở lại Internet Explorer 9 và định dạng TrueType, hoặc ttf . Điều này sẽ cung cấp cho ta mức độ phù hợp tuyệt vời, nhưng khi ta viết CSS của bạn , ta sẽ cung cấp nhiều tùy chọn dự phòng hơn bằng cách sử dụng phông chữ tiêu chuẩn. Thuộc tính font-display cũng sẽ giúp ta quản lý cách ta tải phông chữ cho nhiều user khác nhau.

Bây giờ extract nội dung đã download vào folder ./fonts của ta . Trên các máy chạy Linux và macOS, hãy sử dụng lệnh sau:

unzip ./fonts/fontfiles.zip -d ./fonts 

Kiểm tra nội dung của folder ./fonts :

ls ./fonts 

Bây giờ ta tìm thấy sáu file mới — một file .ttf , một .woff và một file .woff2 cho mỗi phông chữ.

Với các phông chữ của ta đã download , hãy viết một số CSS và sử dụng nó để tạo kiểu cho một phần tử HTML.

Bước 2 - Sử dụng Luật @font-face

Trong bước này, ta sẽ áp dụng các phông chữ đã download bằng thuộc tính @font-face .

Sử dụng nano hoặc editor bạn muốn , tạo và mở file có tên style.css :

nano style.css 

Thêm nội dung sau, nội dung này sẽ xác định luật @font-face với các đường dẫn đến file của ta :

@font-face {   font-family: 'Roboto Mono', monospace;   src: url(fonts/roboto-mono-v12-latin-regular.woff2) format('woff2'),        url(fonts/roboto-mono-v12-latin-regular.woff) format('woff'),        url(fonts/roboto-mono-v12-latin-regular.ttf) format('truetype'); }  @font-face {   font-family: 'Roboto Mono', monospace;   src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format('woff2'),        url(fonts/roboto-mono-v12-latin-700italic.woff) format('woff'),        url(fonts/roboto-mono-v12-latin-700italic.ttf) format('truetype');   font-weight: 700;   font-style: italic; }  h1, p {   font-family: 'Roboto Mono', monospace; }  h1 {   font-family: 'Roboto Mono', monospace;   font-weight: 700;   font-style: italic; } 

Hãy xem xét từng khối mã này.

Luôn xác định @font-face at-rules trước tiên trong file CSS chính của bạn. Phiên bản cơ bản nhất của luật @font-face yêu cầu thuộc tính font-family và src . Trong khối đầu tiên, ta cung cấp Roboto Mono làm giá trị cho font-family và ta cung cấp đường dẫn đến ba file của ta cho src , mỗi file có một định dạng khác nhau và theo thứ tự ưu tiên giảm dần.

Trong khối thứ hai, ta cung cấp cùng một giá trị font-family , nhưng ta sử dụng các đường dẫn đến version 700italic số của Roboto Mono. Sau đó, ta xác định hai thuộc tính, font-weight và font-style . Ta sẽ sử dụng các thuộc tính này để xác định nơi ta muốn sử dụng version thứ hai này của Roboto Mono.

Trong hai khối tiếp theo, ta đang xác định các kiểu tùy chỉnh cho các phần tử <h1> và <p> . Lưu ý cách ta sử dụng font-family để xác định cả hai nhưng sau đó thêm font-weight và font-style vào một khối cụ thể cho <h1> . Điều này sẽ hiển thị các tiêu đề H1 của ta trong Roboto Mono 700italic thay vì Roboto Mono regular .

Lưu và đóng file .

Bây giờ, hãy tạo một trang HTML nhỏ với một số <h1> và <p> .

Tạo và mở một file mới có tên là index.html :

nano index.html 

Thêm mã sau, mã này sẽ xác định một tiêu đề và một dòng văn bản:

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>CSS @font-face</title>   <link rel="stylesheet" href="style.css"> </head> <body>   <h1> Roboto Mono font, 700italic </h1>   <p> Roboto Mono font, regular </p> </body> </html> 

Lưu và đóng file .

Tải index.html trong trình duyệt web. Bạn sẽ thấy rằng tiêu đề của bạn được hiển thị trong Roboto Mono 700italic trong khi văn bản đoạn văn của bạn được hiển thị trong Roboto Mono regular , như thế này:

Với thuộc tính @font-face đang hoạt động, bây giờ ta hãy sử dụng font-display để cấu hình cách thức và thời điểm tải các phông chữ.

Bước 3 - Sử dụng font-display để điều khiển tải font

Với font-display , ta có thể kiểm soát chính xác cách ta muốn tải phông chữ của bạn . Điều này có thể cải thiện đáng kể trải nghiệm user khi sử dụng phông chữ tùy chỉnh.

Đôi khi, khi sử dụng phông chữ tùy chỉnh, user có thể gặp FOUT (nhấp nháy văn bản chưa được định kiểu) hoặc FOIT (nhấp nháy văn bản ẩn) khi trang được tải lần đầu tiên. Một số trình duyệt chọn hiển thị văn bản của ta ngay lập tức, ngay cả khi phông chữ tùy chỉnh không được tải. Trình duyệt sẽ hoàn nguyên về phông chữ tùy chỉnh sau khi tải đầy đủ, nhưng điều này sẽ tạo ra một BÓNG. Các trình duyệt khác sẽ ẩn văn bản trong một khoảng thời gian ngắn cho đến khi tải phông chữ tùy chỉnh, gây ra FOIT. Nếu phông chữ không tải trong repository ảng thời gian, trình duyệt sẽ sử dụng phông chữ dự phòng.

Một cách để đối phó với FOUT là sử dụng một công cụ như Font Style Matcher để tìm một phông chữ dự phòng gần với phông chữ tùy chỉnh nhất có thể để việc thay đổi phông chữ không cảm thấy quá nghiêm trọng. Tuy nhiên, ta có thể sử dụng thuộc tính font-display để xử lý các vấn đề này một cách thanh lịch hơn.

Để khắc phục sự cố tải, font-display nhận một trong 5 giá trị:

• auto : Điều này sử dụng hành vi mặc định của trình duyệt, hành vi này sẽ khác nhau.
• block : Văn bản đầu tiên bị ẩn trong một khoảng thời gian ngắn, nhưng sẽ chuyển sang phông chữ tùy chỉnh khi có sẵn. Giá trị một này được cho là có thời gian swap vô hạn .
• swap : Văn bản không bao giờ bị ẩn và thay đổi thành phông chữ tùy chỉnh khi có sẵn. Điều này cũng cung cấp một khoảng thời gian swap vô hạn.
• fallback : Văn bản bị ẩn trong một khoảng thời gian rất ngắn (khoảng thời gian chặn), sau đó sẽ có một khoảng thời gian swap ngắn. Nếu phông chữ tùy chỉnh không tải trong repository ảng thời gian swap , thì nó hoàn toàn không được tải.
• optional : Văn bản được cung cấp một khoảng thời gian khối rất ngắn để tải (~ 100ms). Nếu phông chữ không tải trong repository ảng thời gian chặn đó, phông chữ dự phòng sẽ được sử dụng và phông chữ tùy chỉnh hoàn toàn không được tải. Tuy nhiên, phông chữ vẫn được download và lưu vào bộ nhớ cache phía sau mức thấp . Điều này nghĩa là trong những lần tải trang tiếp theo, phông chữ tùy chỉnh sẽ có sẵn trong bộ nhớ cache và sau đó sẽ tải ngay lập tức.

Giá trị optional cho font-display cung cấp một giải pháp mạnh mẽ cho nhiều tình huống tải phông chữ. Hãy thêm nó vào CSS của riêng ta .

Mở lại style.css :

nano style.css 

Bây giờ, hãy thêm mã được đánh dấu:

@font-face {   font-family: 'Roboto Mono', monospace;   src: url(fonts/roboto-mono-v12-latin-regular.woff2) format('woff2'),        url(fonts/roboto-mono-v12-latin-regular.woff) format('woff'),        url(fonts/roboto-mono-v12-latin-regular.ttf) format('truetype');   font-display: optional; }  @font-face {   font-family: 'Roboto Mono', monospace;   src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format('woff2'),        url(fonts/roboto-mono-v12-latin-700italic.woff) format('woff'),        url(fonts/roboto-mono-v12-latin-700italic.ttf) format('truetype');   font-weight: 700;   font-style: italic;   font-display: optional; }  h1, p {   font-family: 'Roboto Mono', monospace; }  h1 {   font-family: 'Roboto Mono', monospace;   font-weight: 700;   font-style: italic; } 

Như vậy, phông chữ tùy chỉnh của ta sẽ tải nhanh đến mức user sẽ không bao giờ gặp phải BÓNG hoặc BỐN, hoặc nó hoàn toàn không tải. Tuy nhiên, nó sẽ vẫn download và tải ngay lập tức khi làm mới hoặc truy cập các trang khác.

Kết luận

Trong hướng dẫn này, ta đã download một phông chữ tùy chỉnh và sử dụng thuộc tính @font-face để thêm nó vào trang web. Sau đó, ta đã sử dụng thuộc tính font-display để quản lý cách tải phông chữ tùy chỉnh, nếu có. Để tìm hiểu thêm về font-display và các thuộc tính liên quan, hãy xem xét khám phá tài liệu liên quan trên Mạng nhà phát triển Mozilla .

---

---

Các tin liên quan

Cách tạo ảnh động với Animate.css
2020-09-16
6 tiện ích mở rộng CSS tuyệt vời cho VS Code
2020-09-15
Màu mã hex CSS với giá trị alpha
2020-09-09
Thay đổi con trỏ chuột trong CSS bằng thuộc tính con trỏ
2020-09-08
image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03