Font web CSS
- Trang trước Hiệu ứng văn bản CSS
- Trang tiếp theo CSS Chuyển đổi 2D
Quy tắc @font-face trong CSS
Font web cho phép nhà thiết kế web sử dụng font không được cài đặt trên máy tính của người dùng.
Khi bạn tìm thấy/mua font mà bạn muốn sử dụng, chỉ cần bao gồm tệp font trong máy chủ web của bạn, nó sẽ tự động tải xuống cho người dùng khi cần.
Font của bạn “tự có” trong CSS @font-face được định nghĩa trong quy tắc.
Các định dạng font khác
Font TrueType (TTF)
TrueType là tiêu chuẩn font được phát triển bởi Apple và Microsoft vào cuối những năm 1980. TrueType là định dạng font phổ biến nhất trên hệ điều hành Mac OS và Microsoft Windows.
Font OpenType (OTF)
OpenType là định dạng font máy tính có thể mở rộng. Nó dựa trên TrueType và là nhãn hiệu đăng ký của Microsoft. Hiện nay, font OpenType được sử dụng phổ biến trên các nền tảng máy tính chính.
Định dạng font mở nguồn Web (WOFF)
WOFF là định dạng font cho trang web. Nó được phát triển vào năm 2009 và hiện đã trở thành tiêu chuẩn khuyến nghị của W3C. WOFF cơ bản là OpenType hoặc TrueType được nén và có metadata. Mục tiêu là hỗ trợ việc phân phối font từ máy chủ đến máy khách trên mạng có giới hạn băng thông.
Định dạng font mở nguồn Web (WOFF 2.0)
Font TrueType/OpenType cung cấp mức nén tốt hơn so với WOFF 1.0.
Font/Şhapes SVG
Font SVG cho phép sử dụng SVG làm hình vẽ khi hiển thị văn bản. Tiêu chuẩn SVG 1.1 định nghĩa một mô-đun font, cho phép tạo font trong tài liệu SVG. Bạn cũng có thể áp dụng CSS cho tài liệu SVG, đồng thời quy tắc @font-face có thể được áp dụng cho văn bản trong tài liệu SVG.
Font OpenType nhúng (EOT)
Font EOT là hình thức nén của OpenType font được Microsoft thiết kế, được sử dụng làm font chèn vào trang web.
Hỗ trợ trình duyệt định dạng font
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn định dạng font này.
| Định dạng font | |||||
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | Không hỗ trợ | Không hỗ trợ | Không hỗ trợ | 3.2 | Không hỗ trợ |
| EOT | 6.0 | Không hỗ trợ | Không hỗ trợ | Không hỗ trợ | Không hỗ trợ |
*IE:Định dạng font này chỉ có hiệu lực khi được thiết lập thành "installable".
*Firefox:Mặc định không hỗ trợ, nhưng có thể kích hoạt (cần thiết lập dấu hiệu thành "true" để sử dụng WOFF2).
Sử dụng font bạn cần
Trong quy tắc @font-face: trước tiên định nghĩa tên font (ví dụ myFirstFont), sau đó chỉ đường đến tệp font.
Lưu ý:URL của font luôn sử dụng chữ thường. Chữ in hoa có thể gây ra kết quả không mong muốn trong IE.
Để sử dụng font cho các phần tử HTML, hãy tham chiếu tên font qua thuộc tính font-family (myFirstFont):
ví dụ
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Sử dụng văn bản đậm
Bạn phải thêm một quy tắc @font-face khác, chứa biểu thức mô tả cho văn bản đậm:
ví dụ
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Tệp "sansation_bold.woff" là một tệp font khác, chứa các ký tự đậm của font Sansation.
Mỗi khi một đoạn văn bản có họ font "myFirstFont" cần hiển thị đậm, trình duyệt sẽ sử dụng nó.
Như vậy, bạn có thể thiết lập nhiều @font-face quy tắc.
quy tắc font CSS.
Bảng dưới đây liệt kê các font có thể được @font-face Tất cả các biểu thức mô tả font được định nghĩa trong quy tắc:
| biểu thức mô tả | giá trị | mô tả |
|---|---|---|
| font-family | name | bắt buộc. Định nghĩa tên của font. |
| src | URL | bắt buộc. Định nghĩa URL của tệp font. |
| font-stretch |
|
Tùy chọn. Định nghĩa cách mở rộng Phông chữ. Giá trị mặc định là "normal". |
| font-style |
|
Tùy chọn. Định nghĩa kiểu của Phông chữ. Giá trị mặc định là "normal". |
| font-weight |
|
Tùy chọn. Định nghĩa độ dày của Phông chữ. Giá trị mặc định là "normal". |
| unicode-range | unicode-range | Tùy chọn. Định nghĩa khoảng Unicode được hỗ trợ bởi Phông chữ. Giá trị mặc định là "U+0-10FFFF". |
- Trang trước Hiệu ứng văn bản CSS
- Trang tiếp theo CSS Chuyển đổi 2D
