Phông
chữ với CSS3
Phông
chữ với CSS3 - Quy tắc @font-face
Phông chữ web cho phép nhà thiết kế Web sử dụng các
phông chữ chưa được cài đặt trên máy tính của người dùng.
Khi bạn đã tìm thấy\mua phông chữ mà bạn muốn sử dụng,
bạn chỉ cần đưa các tập tin phông chữ lên máy chủ web của bạn, và nó sẽ được tự
động tải xuống cho người dùng khi cần thiết.
Phông chữ "riêng" của bạn được xác định
trong CSS3 nhờ quy tắc @font-face.
Các
trình duyệt hỗ trợ
Những con số trong bảng cho thấy phiên bản trình duyệt
đầu tiên hỗ trợ đầy đủ quy tắc này.
Các
định dạng phông chữ khác nhau
TrueType
Fonts (TTF)
TrueType là một chuẩn về phông chữ được phát triển
vào cuối thập niên 1980, bởi Apple và Microsoft. TrueType là định dạng phông chữ
phổ biến nhất của hai hệ điều hành Mac OS và Microsoft Windows.
OpenType
Fonts (OTF)
OpenType là định dạng cho các phông chữ máy tính có
khả năng mở rộng. Nó được xây dựng dựa trên TrueType, và là một định dạng được
đăng ký của Microsoft. Phông chữ OpenType được sử dụng phổ biến ngàynay trên
các nền tảng máy tính quan trọng.
The
Web Open Font Format (WOFF)
WOFF là định dạng phông chữ để sử dụng trong các
trang web. Nó được phát triển năm 2009, và bây giờ là một khuyến nghị của W3C.
WOFF cơ bản là OpenType hoặc TrueType được nén và bổ sung metadata (siêu dữ liệu).
Mục đích là để hỗ trợ phân phối phông chữ từ máy chủ tới máy khách (client) qua
mạng với các ràng buộc về băng thông.
The
Web Open Font Format (WOFF 2.0)
Phông TrueType/OpenType cung cấp khả năng nén tốt hơn
so với WOFF 1.0.
SVG
Fonts/Shapes
Các phông chữ SVG được sử dụng để làm các họa tiết
này khi hiển thị văn bản. Đặc điểm kỹ thuật của SVG 1.1 xác định một mô-đun
phông cho phép tạo ra các phông chữ trong một tài liệu SVG. Bạn cũng có thể áp
dụng CSS cho các tài liệu SVG, và quy tắc @font-face có thể được áp dụng cho
văn bản trong các tài liệu SVG.
Embedded
OpenType Fonts (EOT)
Các phông chữ EOT là một định dạng nhỏ gọn của phông
chữ OpenType được thiết kế bởi Microsoft để sử dụng như là các phông chữ nhúng
trên các trang web.
Các
trình duyệt hỗ trợ các định dạng về phông
Những con số trong bảng cho thấy phiên bản trình duyệt
đầu tiên hỗ trợ đầy đủ các định dạng phông chữ.
- IE:Định dạng phông chữ chỉ hoạt động khi được thiết lập là "có thể cài đặt".
- Firefox: Mặc định không được hỗ trợ, nhưng có thể được kích hoạt (cần phải thiết lập một một lựa chọn là "true" để sử dụng WOFF2).
Sử
dụng phông chữ mà bạn muốn
Quy tắc @font-face trong CSS3 trước hết bạn phải xác định tên cho phông
chữ (ví dụ myFirstFont), và sau đó trỏ tới tệp phông.
Mẹo: Luôn luôn sử dụng chữ thường cho URL của phông chữ.
Chữ hoa có thể cho kết quả không mong đợi
trong IE.
Để sử dụng phông chữ cho một phần tử HTML, chỉ ra tên
của phông chữ (myFirstFont) thông qua các thuộc tính font-family:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Sử
dụng văn bản in đậm
Bạn phải thêm quy tắc @font-face chứa các mô tả về văn bản in đậm:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Tệp tin "sansation_bold.woff" là một tệp
phông chữ, có chứa các ký tự in đậm cho phông chữ Sansation.
Các trình duyệt sẽ sử dụng văn bản in đậm bất cứ khi
nào một đoạn văn bản có font-family là "myFirstFont".
Bằng cách này bạn có thể có nhiều quy tắc @font-face cho phông chữ giống nhau.
Tự làm bài tập!
Các
mô tả về phông chữ trong CSS3
Bảng sau liệt kê tất cả các mô tả về phông chữ có thể
được định nghĩa trong quy tắc @font-face:
CodeLean.vn
Nguồn w3school.org
Đăng nhận xét