Ngôn ngữ CSS - CSS3 Web Fonts
Cách nhúng font vào web với @font-face, kỷ nguyên của Typography
Trong thiết kế web, nhiều khi người thiết kế muốn sử dụng một vài phông độc đáo nhằm gây hiệu ứng về mặt thẩm mỹ đối với người xem. Nhưng trước kia khi việc nhúng font là không thực hiện được, người thiết kế đành ngậm ngùi chịu gò bò chỉ sử dụng các font chữ mà trên máy tính người truy cập web có, và điều đấy làm nảy sinh ra thuật ngữ font web an toàn – chính là các font hay được cài nhất trên máy tính toàn cầu.
Giờ đây mọi chuyện được giải quyết thật đơn giản, người thiết kế chỉ cần đưa font độc đáo của mình lên host của trang web. Khi người dùng duyệt web, họ sẽ tải font về (giống như tải ảnh vậy) và xem được các hiệu ứng font lạ mắt trên trang web.
Nhúng font bằng @font-face trong CSS đã mở bung sức sáng tạo của nhà thiết kế, kết hợp với các khả năng của CSS3, typography trên web đã lên một tầm cao mới.
Danh sách các font web an toàn:
- Arial
- Time New Roman
- Georgia
- Tahoma
- Verdana
- Trebuchet MS
- Courier New
- Comic Sans MS
- IMPACT
Các định dạng Web Font khác nhau trong CSS3:
| Font | Giải thích |
|---|---|
| TrueType Fonts (TTF) | TrueType là font chuẩn được Apple và Microsoft phát triển |
| OpenType Fonts (OTF) | OpenType là một định dạng cho scalable computer font và được phát triển bởi Microsoft |
| The Web Open Font Format (WOFF) | WOFF được sử dụng để phát triển Webpage và được phát triển vào năm 2009. Bây giờ, W3C khuyến nghị sử dụng định dạng font này |
| SVG Fonts/Shapes | SVG cho phép các SVG font bên trong các tài liệu SVG. Chúng ta cũng có thể áp dụng CSS cho SVG bằng cách sử dụng thuộc tính font face |
| Embedded OpenType Fonts (EOT) | EOT được sử dụng để phát triển và nó được nhúng vào trong các Webpage, do đó không cần đến sự trợ giúp của một font thứ ba nào đó |
Ví dụ:
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
</style>
Qui tắc @font-face trong CSS Bảng dưới đây liệt kê tất cả các phần font có thể được đặt trong qui tắc @font-face trong CSS:
| Giá trị | Giải thích |
|---|---|
| font-family | Sử dụng nhiều loại font |
| src | Đường dẫn đến nơi chứa fonts |
| font-stretch | Được sử dụng để làm cho văn bản hiển thị rộng hơn hoặc hẹp đi |
| font-style | Được sử dụng để định nghĩa font style |
| font-weight | Được sử dụng để định nghĩa font weight (tính rõ ràng của font) |
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Xem ví dụ
Các trình duyệt hỗ trợ
| Thuộc tính |  Chrome |
 IE |
 Firefox |
 Opera |
 Safari |
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | Không hỗ trợ | 36.0 | 35.0* | Không hỗ trợ | 26.0 |
| EOT | 6.0 | Không hỗ trợ | Không hỗ trợ | Không hỗ trợ | Không hỗ trợ |
| SVG | Không hỗ trợ | 4.0 | Không hỗ trợ | 3.2 | 9.0 |
