Thứ Hai, 30 tháng 12, 2013
CSS3 Fonts
CSS3 @ font-face Rule
Trước khi CSS3, thiết kế web có sử dụng phông chữ đã được cài đặt trên máy tính của người dùng.
Với CSS3, các nhà thiết kế web có thể sử dụng bất cứ font chữ anh / cô ấy thích.
Khi bạn đã tìm thấy / đã mua phông chữ mà bạn muốn sử dụng, bao gồm các tập tin font chữ trên máy chủ web của bạn, và nó sẽ được tự động tải về cho người sử dụng khi cần thiết.
Bạn phông chữ "sở hữu" được định nghĩa trong CSS3 @ font-face quy tắc.
Hỗ trợ trình duyệt
| Tài sản | Hỗ trợ trình duyệt | ||||
|---|---|---|---|---|---|
| @ Font-face | |||||
Internet Explorer 9 +, Firefox, Chrome, Safari, và Opera hỗ trợ WOFF (Web Open Font Format) font.
Firefox, Chrome, Safari, và Opera cũng hỗ trợ phông chữ kiểu TTF (True Type Fonts) và OTF (OpenType Fonts).
Chrome, Safari và Opera cũng hỗ trợ SVG phông chữ / hình dạng.
Internet Explorer cũng hỗ trợ EOT (OpenType nhúng) phông chữ.
Lưu ý: Internet Explorer 8 và các phiên bản trước đó, không hỗ trợ @ font-face quy tắc.
Sử dụng Font bạn muốn
Trong @ font-face mới quy tắc đầu tiên bạn phải xác định một tên cho phông chữ (ví dụ myFirstFont), và sau đó trỏ đến file font.
 | Mẹo: Sử dụng chữ thường cho URL font. Chữ hoa có thể cho kết quả bất ngờ trong IE. |
|---|
Để sử dụng phông chữ cho một phần tử HTML, hãy tham khảo tên của font (myFirstFont) thông qua thuộc tính font-family:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>
</body>
</html>
Thử nó cho mình »
Sử dụng Bold Text
Bạn phải thêm một quy tắc @ font-face chứa mô tả cho văn bản in đậm:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>
</body>
</html>
Thử nó cho mình »
Tập tin "sansation_bold.woff" là một tập tin font chữ, có chứa các ký tự in đậm cho phông chữ Sansation.
Trình duyệt sẽ sử dụng bất cứ khi nào một đoạn văn bản với font-family "myFirstFont" nên làm như in đậm.
Bằng cách này bạn có thể có nhiều quy tắc @ font-face cho cùng một phông chữ.
CSS3 Font Descriptors
Bảng sau liệt kê tất cả các mô tả phông chữ có thể được định nghĩa bên trong @ font-face quy tắc:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique | Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét