CSS @font-face

@font-face là CSS at-rule cho trình duyệt biết nơi tìm tệp font và gọi nó là gì. Nó lần đầu được hỗ trợ trong IE 4 vào năm 1997, nhưng chỉ trở nên thực tế trên các trình duyệt khoảng năm 2010 khi WOFF xuất hiện và các trình duyệt khác triển khai quy tắc này một cách nhất quán.

Đối với icon fonts, @font-face là chất kết dính giữa các tệp font của bạn và các CSS classes hiển thị biểu tượng. Không có nó, trình duyệt không có cách nào biết rằng font-family: 'MyIcons' nên tải một tệp cụ thể từ máy chủ của bạn.

@font-face {
  font-family: 'MyIcons';
  src: url('fonts/myicons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Descriptor font-family đặt tên mà bạn sẽ tham chiếu sau này. Descriptor src cho trình duyệt biết nơi tải tệp xuống và định dạng nào. Các descriptors font-weight và font-style đảm bảo trình duyệt không cố tổng hợp các biến thể đậm hoặc nghiêng. Và font-display kiểm soát điều gì xảy ra khi font đang tải.

Gợi ý format() sau mỗi URL cho trình duyệt biết định dạng tệp là gì, để nó có thể bỏ qua các định dạng không hỗ trợ mà không cần tải trước. Theo năm tháng, tập hợp định dạng được khuyến nghị đã thu hẹp đáng kể khi hỗ trợ trình duyệt cải thiện.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2');
  font-display: swap;
}

Với mức phủ trình duyệt 97%+, chỉ WOFF2 là đủ cho đại đa số các dự án hiện đại. Đây là cách tiếp cận đơn giản và hiệu suất cao nhất.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff');
  font-display: swap;
}

Thêm WOFF làm fallback bao phủ IE 11, không hỗ trợ WOFF2. Các trình duyệt hiện đại sẽ lấy tệp WOFF2; IE 11 chuyển sang WOFF.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.eot');                    /* IE9 compat */
  src: url('myicons.eot?#iefix') format('embedded-opentype'),
       url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff'),
       url('myicons.ttf') format('truetype');
  font-display: swap;
}

Full "bulletproof" stack bao gồm EOT cho IE 6-8, WOFF2 cho các trình duyệt hiện đại, WOFF cho IE 9-11, và TTF làm fallback cuối cùng. Trình duyệt thử từng mục src theo thứ tự và sử dụng định dạng đầu tiên nó hiểu. Cách tiếp cận này chỉ cần thiết cho các dự án có yêu cầu kế thừa cực đoan.

Mẫu chuẩn cho icon fonts sử dụng base class đặt font-family và các style hiển thị chung, sau đó các icon class riêng lẻ sử dụng pseudo-elements ::before với content được đặt thành Unicode code point của mỗi biểu tượng.

.icon {
  font-family: 'MyIcons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home::before { content: '\E001'; }
.icon-search::before { content: '\E002'; }
.icon-user::before { content: '\E003'; }

Base class đặt lại font styling để ngăn trình duyệt áp dụng đậm, nghiêng hoặc các biến đổi khác làm méo biểu tượng. Các thuộc tính -webkit-font-smoothing và -moz-osx-font-smoothing bật antialiasing để hiển thị sắc nét hơn trên macOS và iOS.

Mỗi icon class đặt pseudo-element ::before với Unicode code point được gán cho glyph đó. Ký hiệu backslash-E (\E001) là cách CSS tham chiếu một ký tự Unicode bằng hex code point của nó.

<i class="icon icon-home"></i>
<span class="icon icon-search"></span>

Cả <i> và <span> đều hoạt động tốt như nhau. Phần tử đó trống — biểu tượng được hiển thị hoàn toàn bởi pseudo-element ::before.

Descriptor font-display kiểm soát những gì trình duyệt hiển thị trong khi tệp font vẫn đang tải xuống. Điều này rất quan trọng cho icon fonts vì cài đặt sai có thể khiến biểu tượng vô hình trong khi tải trang.

Đối với icon fonts, swap là lựa chọn được khuyến nghị. Một thoáng nhấp nháy nội dung chưa được tạo kiểu (nơi các code point của biểu tượng có thể xuất hiện dưới dạng hình vuông hoặc khoảng trắng) tốt hơn nhiều so với biểu tượng vô hình. Với block, người dùng có thể thấy khoảng trống nơi biểu tượng nên có trong tối đa 3 giây trên kết nối chậm — trông như trang bị hỏng.

Các tệp font mặc định chặn render — trình duyệt sẽ không vẽ văn bản bằng font tùy chỉnh cho đến khi tệp đã tải xuống. Đây là các kỹ thuật để giảm thiểu tác động:

• Preload tệp font — sử dụng <link rel="preload"> để bắt đầu tải font sớm nhất có thể, trước khi trình duyệt parse CSS tham chiếu nó.
• Self-host font của bạn — phục vụ tệp font từ cùng origin với HTML tránh tra cứu DNS thêm và thiết lập kết nối, và loại bỏ vấn đề CORS.
• Subset font của bạn — xóa biểu tượng không sử dụng để giảm kích thước tệp. Font 500 biểu tượng nơi bạn chỉ dùng 50 lãng phí 90% lần tải xuống.
• Sử dụng unicode-range — nếu bạn có nhiều bộ biểu tượng, descriptor này cho trình duyệt biết chỉ tải tệp font khi các ký tự trong phạm vi được chỉ định thực sự được sử dụng trên trang.

<link rel="preload" href="fonts/myicons.woff2" as="font"
      type="font/woff2" crossorigin>

Thuộc tính crossorigin bắt buộc ngay cả với font same-origin — đây là đặc điểm của đặc tả tải font. Không có nó, trình duyệt sẽ tải font hai lần: một lần từ gợi ý preload (không có CORS) và một lần từ quy tắc @font-face (có CORS).

• Lỗi CORS — Các tệp font được phục vụ từ origin khác (ví dụ: CDN subdomain) cần header Access-Control-Allow-Origin trên máy chủ. Hoặc, sử dụng thuộc tính crossorigin trên tag <link>. Không có cấu hình CORS phù hợp, trình duyệt sẽ chặn font âm thầm.
• Biểu tượng hiển thị dưới dạng hình vuông hoặc chữ nhật — Điều này thường có nghĩa là đường dẫn tệp font sai, font chưa tải xong, hoặc tên font-family trong icon class không khớp với tên trong khai báo @font-face. Kiểm tra tab Network của trình duyệt để xác nhận tệp font đã tải với status 200.
• Biểu tượng hiển thị sai glyph — Xung đột Unicode code point với system fonts. Nếu icon font của bạn sử dụng code points trong các phạm vi chồng lên font hệ thống thông dụng, trình duyệt có thể render ký tự hệ thống thay thế. Icon fonts thường sử dụng Private Use Area (U+E000 đến U+F8FF) để tránh điều này.