Các @font-facequy tắc cho phép tùy chỉnh phông chữ được nạp trên một trang web. Sau khi được thêm vào biểu định kiểu, quy tắc sẽ hướng dẫn trình duyệt tải xuống phông chữ từ nơi nó được lưu trữ, sau đó hiển thị nó như được chỉ định trong CSS.
Không có quy tắc, các thiết kế của chúng tôi bị giới hạn ở các phông chữ đã được tải trên máy tính của người dùng, phông chữ này khác nhau tùy thuộc vào hệ thống đang được sử dụng. Đây là một bản phân tích tốt về các phông chữ hệ thống hiện có.
Hỗ trợ trình duyệt sâu nhất có thể
Đây là phương pháp được hỗ trợ sâu nhất hiện nay. Các @font-facequy tắc nên được thêm vào các kiểu trước khi bất kỳ phong cách.
@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )Sau đó, sử dụng nó để tạo kiểu cho các phần tử như sau:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Mức hỗ trợ trình duyệt thực tế
Mọi thứ đang chuyển mạnh sang WOFF và WOFF 2, vì vậy chúng ta có thể có:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3,6+ | 11,50+ | 9+ | 4.4+ | 5.1+ |
Hỗ trợ trình duyệt sâu hơn một chút
Nếu bạn cần một loại phương tiện hài lòng giữa hỗ trợ đầy đủ và hỗ trợ thực tế, điều này sẽ bao gồm một số cơ sở khác:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| 3,5+ | 3+ | 3,5+ | 10.1+ | 9+ | 2,2+ | 4.3+ |
Hỗ trợ trình duyệt siêu tiến bộ
Nếu chúng ta đặt trang trại vào WOFF, thì chúng ta có thể mong đợi mọi thứ sẽ chuyển sang WOFF2 vào một thời điểm nào đó. Điều đó có nghĩa là chúng ta có thể sống trên bờ vực chảy máu với:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Không | 35+ với cờ | 23+ | Không | 37 | Không |
Kỹ thuật thay thế
@import
Mặc dù @font-facerất tốt cho các phông chữ được lưu trữ trên các máy chủ của chúng tôi, nhưng có thể có những trường hợp mà giải pháp phông chữ được lưu trữ tốt hơn. Google Fonts cung cấp điều này như một cách để sử dụng phông chữ của họ. Sau đây là một ví dụ về cách sử dụng @importđể tải phông chữ Open Sans từ Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Sau đó, chúng ta có thể sử dụng nó để tạo kiểu cho các phần tử:
body ( font-family: 'Open Sans', sans-serif; )Nếu bạn mở URL cho phông chữ, bạn thực sự có thể thấy tất cả @font-facecông việc đang được thực hiện đằng sau hậu trường.
Lợi ích của việc sử dụng dịch vụ được lưu trữ là nó có khả năng bao gồm tất cả các biến thể tệp phông chữ, đảm bảo khả năng tương thích sâu trên nhiều trình duyệt mà không cần phải tự lưu trữ tất cả các tệp đó.
Xem Bút sử dụng @import để biết các phông chữ tùy chỉnh bằng CSS-Tricks (@ css-trick) trên CodePen.
nhập một biểu định kiểu
Tương tự, bạn có thể liên kết đến cùng một nội dung như với bất kỳ tệp CSS nào khác, trong tài liệu HTML thay vì trong CSS. Sử dụng cùng một ví dụ từ Google Fonts, đây là những gì chúng tôi sẽ sử dụng:
Sau đó, chúng ta có thể tạo kiểu cho các phần tử của mình giống như các phương pháp khác:
body ( font-family: 'Open Sans', sans-serif; )Một lần nữa, đây là nhập các @font-facequy tắc nhưng thay vì đưa chúng vào biểu định kiểu của chúng tôi, chúng được thêm vào HTML của chúng tôi .
Xem phần Sử dụng bút cho phông chữ tùy chỉnh của CSS-Tricks (@ css-trick) trên CodePen.
Đó là về cùng một điều… cả hai kỹ thuật đều tải xuống các nội dung cần thiết.
Hiểu các loại tệp phông chữ
Đoạn mã gốc ở đầu bài đăng này đề cập đến rất nhiều tệp có phần mở rộng lạ. Chúng ta hãy xem xét từng cái và hiểu rõ hơn về ý nghĩa của chúng.
WOFF / WOFF2
Viết tắt của: Định dạng Phông chữ Mở trên Web.
Được tạo để sử dụng trên web và được phát triển bởi Mozilla cùng với các tổ chức khác, phông chữ WOFF thường tải nhanh hơn các định dạng khác vì chúng sử dụng phiên bản nén của cấu trúc được sử dụng bởi phông chữ OpenType (OTF) và TrueType (TTF). Định dạng này cũng có thể bao gồm siêu dữ liệu và thông tin giấy phép trong tệp phông chữ. Định dạng này dường như là người chiến thắng và là nơi tất cả các trình duyệt đều hướng tới.
WOFF2 là thế hệ tiếp theo của WOFF và tự hào có khả năng nén tốt hơn so với bản gốc.
SVG / SVGZ
Viết tắt của: Đồ họa Vectơ có thể mở rộng (Phông chữ)
SVG là một dạng vector tái tạo lại phông chữ, giúp nó có kích thước tệp nhẹ hơn nhiều và cũng lý tưởng cho việc sử dụng trên thiết bị di động. Định dạng này là định dạng duy nhất được cho phép bởi phiên bản 4.1 trở xuống của Safari dành cho iOS. Phông chữ SVG hiện không được Firefox, IE hoặc IE Mobile hỗ trợ. Firefox đã hoãn triển khai vô thời hạn để tập trung vào WOFF.
SVGZ là phiên bản nén của SVG.
EOT
Viết tắt của: Loại mở nhúng.
Định dạng này được tạo ra bởi Microsoft (những nhà đổi mới ban đầu của @font-face) và là một tiêu chuẩn tệp độc quyền chỉ được hỗ trợ bởi IE. Trên thực tế, đó là định dạng duy nhất mà IE8 trở xuống nhận ra khi sử dụng @font-face.
OTF / TTF
Viết tắt của: Phông chữ OpenType và Phông chữ TrueType.
Định dạng WOFF ban đầu được tạo ra như một phản ứng đối với OTF và TTF, một phần vì những định dạng này có thể dễ dàng (và bất hợp pháp) bị sao chép, Tuy nhiên, OpenType có những khả năng mà nhiều nhà thiết kế có thể quan tâm (chữ ghép và những thứ tương tự).
Lưu ý về Hiệu suất
Phông chữ web rất tốt cho thiết kế nhưng điều quan trọng là phải hiểu tác động của chúng đối với hiệu suất web. Phông chữ tùy chỉnh thường khiến các trang web ảnh hưởng đến hiệu suất vì phông chữ phải được tải xuống trước khi nó được hiển thị.
Một triệu chứng phổ biến thường là một khoảnh khắc ngắn trong đó phông chữ tải đầu tiên dưới dạng dự phòng, sau đó nhấp nháy với phông chữ đã tải xuống. Paul Ailen có một bài đăng cũ hơn về điều này (được đặt tên là “FOUT”: Flash Of Unstyled Text).
Ngày nay, các trình duyệt thường ẩn văn bản trước khi phông chữ tùy chỉnh tải theo mặc định. Tốt hơn hay tệ hơn? Bạn quyết định. Bạn có thể kiểm soát điều này thông qua các kỹ thuật khác nhau. Bài viết này hơi nằm ngoài phạm vi, nhưng đây là một bộ ba bài viết của Zach Leatherman để giúp bạn bắt đầu tìm hiểu về lỗ thỏ:
- @ Font-face tốt hơn với Sự kiện tải phông chữ
- Cách chúng tôi sử dụng phông chữ web một cách có trách nhiệm hoặc tránh sử dụng @ font-face-palm
- Flash of Faux Text-vẫn còn nhiều hơn khi tải phông chữ
Dưới đây là một số cân nhắc thêm khi triển khai phông chữ tùy chỉnh:
Xem kích thước tệp
Phông chữ có thể nặng một cách đáng ngạc nhiên, vì vậy hãy hướng tới các tùy chọn cung cấp các phiên bản nhẹ hơn. Ví dụ: ưu tiên bộ phông chữ 50KB so với bộ phông chữ nặng 400KB.
Giới hạn bộ ký tự, nếu có thể
Bạn có thực sự cần độ đậm và đậm cho một phông chữ không? Giới hạn bộ phông chữ của bạn chỉ tải những gì được sử dụng là một ý kiến hay và có một số mẹo hay về điều đó ở đây.
Xem xét phông chữ hệ thống cho màn hình nhỏ
Nhiều thiết bị bị kẹt trên các kết nối kém cỏi. Một mẹo có thể là nhắm mục tiêu các màn hình lớn hơn khi tải phông chữ tùy chỉnh bằng cách sử dụng @media.
Trong ví dụ này, các màn hình nhỏ hơn 1000px sẽ được cung cấp phông chữ hệ thống thay thế và các màn hình rộng trở lên sẽ được cung cấp phông chữ tùy chỉnh.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Dịch vụ Phông chữ
Có một số dịch vụ sẽ lưu trữ phông chữ và cung cấp quyền truy cập vào các phông chữ được cấp phép thương mại. Lợi ích của việc sử dụng một dịch vụ thường đi kèm với việc có nhiều lựa chọn phông chữ hợp pháp được phân phối hiệu quả (ví dụ: phân phối chúng trên một CDN nhanh chóng).
Dưới đây là một số dịch vụ phông chữ được lưu trữ:
- Kiểu chữ đám mây
- Bộ gõ
- Fontdeck
- Webtype
- Fontspring
- Typotheque
- Fonts.com
- Phông chữ Google
- Font Squirrel
Còn về Phông chữ Biểu tượng?
Đó là sự thật, @ font-face có thể tải một tệp phông chữ với đầy đủ các biểu tượng có thể được sử dụng cho một hệ thống biểu tượng. Tuy nhiên, tôi nghĩ rằng bạn nên sử dụng SVG làm hệ thống biểu tượng tốt hơn nhiều. Đây là một so sánh của hai phương pháp.
Nhiêu tai nguyên hơn
- Kiến thức cơ bản về API phông chữ của Google
- Họ phông chữ CSS