CSS Web fonts cho phép sử dụng các font chữ khác nhau. Các font này không được cài đặt trên hệ thống cục bộ. Sau khi chọn font chưa cài đặt, hãy thêm file font lên web server. Nó sẽ tự động tải xuống khi cần thiết.
Cú pháp:
@font-face {
font details
}Các loại định dạng Font:
Có nhiều loại định dạng font khác nhau, được liệt kê dưới đây:
- TrueType Fonts (TTF): Cho dù bạn dùng hệ điều hành Microsoft hay Mac, TrueType là định dạng font phổ biến nhất. Đây là chuẩn font được phát triển bởi Microsoft và Apple vào cuối những năm 1980. Font TrueType mô tả mỗi glyph như một tập hợp các đường dẫn. Đường dẫn là một đường cong khép kín được chỉ định bằng các điểm và toán học cụ thể. Ví dụ, chữ ‘i’ thường có hai đường dẫn: một cho dấu chấm, một cho phần còn lại. Pixels được dùng để lấp đầy đường dẫn tạo nên hình dạng chữ cuối cùng. Ưu điểm của TrueType là glyph có thể mở rộng đến mọi kích thước.
- OpenType Fonts (OTF): OpenType là một định dạng font được xây dựng dựa trên TrueType. Định dạng OpenType được phát triển bởi Microsoft và Adobe. Tuy nhiên đây là nhãn hiệu đã đăng ký của Microsoft. Tính năng bố cục trong font OpenType được tổ chức theo script và ngôn ngữ. Điều này cho phép một font hỗ trợ nhiều hệ thống chữ viết. Định dạng OpenType hướng đến mục tiêu bảo vệ dữ liệu font tốt hơn và hỗ trợ đa nền tảng rộng hơn.
- The Web Open Font Format (WOFF): WOFF là định dạng font được dùng trong các trang web. Nó được phát triển năm 2009 bởi Mozilla, Type Supply, LettError và các tổ chức khác. WOFF cơ bản là OpenType hoặc TrueType đã nén và có thêm metadata. Mục tiêu của WOFF là hỗ trợ phân phối font từ server đến client. Điều này hữu ích khi mạng bị giới hạn băng thông. Có hai phiên bản WOFF là WOFF và WOFF2. Chúng khác nhau chủ yếu ở thuật toán nén được sử dụng. Chúng được mô tả bằng các descriptor 'woff' và 'woff2'.
- SVG Fonts/Shapes: SVG là viết tắt của Scalable Vector Graphics (Đồ họa vector có thể mở rộng). Khi SVG mới được chỉ định, hầu hết các trình duyệt web chưa hỗ trợ đầy đủ web fonts. Để hiển thị văn bản chính xác, công nghệ mô tả font đã được thêm vào SVG. Mục đích là cung cấp khả năng nhúng thông tin glyph khi hiển thị.
- Embedded OpenType Fonts (EOT): Định dạng file Embedded OpenType được phát triển bởi Microsoft. EOT là một dạng nén của font OpenType để dùng làm embedded fonts trên web. Nó được thiết kế để cho phép font TrueType và OpenType được liên kết đến trang web. Người dùng có thể tải xuống để hiển thị trang web bằng font đó.
Font Descriptors:
Descriptors có thể được định nghĩa bên trong quy tắc @font-face. Bây giờ chúng ta sẽ giải thích các loại font descriptors khác nhau.
- font-family: Nó được dùng để xác định tên của font. Nó là bắt buộc để web fonts hoạt động.
- src: Nó được dùng để xác định URL nơi chúng ta lấy font. Tương tự font-family, src cũng là bắt buộc. Ngoại trừ hai trường này, các descriptor còn lại là tùy chọn.
- font-stretch: Nó được dùng để tìm xem font nên được kéo giãn như thế nào. Giá trị mặc định là Normal. Các giá trị font-stretch khác nhau là normal, condensed, semi-condensed, ultra-condensed, extra-condensed, expanded, semi-expanded, extra-expanded và ultra-expanded.
- font-style: Nó được dùng để xác định các kiểu font khác nhau. Các kiểu khác nhau có thể được đặt là oblique. Kiểu mặc định là normal.
- font-weight: Độ đậm của font có thể được xác định bằng descriptor này. Giá trị mặc định của font-weight là "normal". Các giá trị cho độ đậm là normal, bold. Bạn có thể dùng giá trị số từ 100-900 với bước tăng là 100.
CSS Web Fonts Examples
Ví dụ 1: Ví dụ này minh họa cách sử dụng web-fonts.
HTML<!DOCTYPE html>
<html>
<head>
<style>
@font-face{
font-family: monospace;
src:url(sansation_light.woff);
}
/* Sets font family to monospace */
* {
font-family: monospace;
}
</style>
</head>
<body>
<div>
<h1>GeeksForGeeks</h1>
<p>A computer science portal for geeks.</p>
</div>
<h1>Great Geek's font face example.</h1>
</body>
</html>
Đầu ra:
Ví dụ 2: Ví dụ này minh họa cách sử dụng web-fonts.
HTML<!DOCTYPE html>
<html>
<head>
<style>
@font-face{
/* Set font family to monospace */
font-family:monospace;
src:url(sansation_light.woff);
}
* {
font-family:monospace;
/** font style to italic */
font-style:italic;
font-weight:bold;
}
</style>
</head>
<body>
<div>
<h1>GeeksForGeeks</h1>
<p>A computer science portal for geeks.</p>
</div>
<h1>Great Geek's font face example.</h1>
</body>
</html>
Đầu ra:
