メインコンテンツまでスキップ

Web Font

Khi sử dụng Web Font, bạn sẽ đặt tệp font trên máy chủ của trang web. Để sử dụng tệp font đã đặt, bạn sẽ sử dụng @font-face trong CSS.

Ví dụ: nếu bạn muốn tải dữ liệu font từ Google Font API, đoạn CSS để tải font sẽ có dạng như sau:

https://fonts.googleapis.com/css2?family=Cinzel&display=swap

/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cinzel/v11/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnfYPlC2xcZqTFU3AS.woff) format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cinzel/v11/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnfY3lC2xcZqTFUw.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Bằng cách thực hiện việc này, bạn có thể sử dụng thuộc tính font-family trong CSS để chỉ định font family của tài nguyên đã tải. Như đã đề cập trước đó, dữ liệu font rất lớn, do đó thay vì đặt Web Font trên máy chủ của bạn, việc sử dụng dịch vụ như Google Font API với việc cung cấp nhanh chóng thông qua CDN đã được cài đặt là một phương pháp đơn giản và phổ biến.

Ví dụ: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FontName">

Đối với Web Font tiếng Nhật​

So với các ngôn ngữ có số lượng ký tự ít hơn như tiếng Anh, các ngôn ngữ trong khu vực Đông Á như tiếng Nhật có số lượng ký tự lớn hơn, vượt quá phạm vi của một byte (0-255). Vì vậy, font chữ tiếng Nhật sử dụng bộ ký tự đa byte Multibyte character set (thường được gọi là "Zenkaku" trong tiếng Nhật).

Trong Web Font của tiếng Nhật, kích thước dữ liệu cũng trở nên rất lớn. Do đó, khi phân phối font chữ từ máy chủ riêng của mình, bạn có thể thực hiện một số biện pháp như subset để giảm kích thước dữ liệu.