Điện thoại: 0944210999
Cấu trúc
@font-face {
thuộc tính: giá trị;
}
Thuộc tính của font trong css3:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| font-family | tên | font-family: myFont; | Xác định tên cho font chữ. |
| font-style | normal italic oblique | font-style: italic; | Xác định loại cho font chữ. |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | font-weight: bold; | Xác định font đậm hay không. |
| src | url(đường dẫn font) | src: url(files/vcouri.ttf); | Xác định đường dẫn font chữ được load. |
| unicode-range | phạm vi unicode | unicode-range: U+0020-U+007e; | Xác định phạm vi của các ký tự unicode được hỗ trợ. |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | font-stretch: condensed; | Xác định văn bản rộng hơn hay hẹp hơn. (Thuộc tính này vẫn chưa được hỗ trợ bởi trình duyệt). |
Ví dụ
HTML viết:
<html> <head></head> <body> <p>Su dung font trong css3</p> <p class="addFont">Su dung font trong css3</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
Su dung font trong css3
Su dung font trong css3
CSS viết:
@font-face {
font-family: 'myFont';
src: url('vcouri-webfont.ttf');
}
p.addFont {
font-family: 'myFont';
}
Hiển thị trình duyệt khi có CSS:
Su dung font trong css3
Su dung font trong css3
Sử dụng cách sau đây để các trình duyệt đều hiển thị tốt, CSS viết:
@font-face {
font-family: 'myFont';
src: url('vcouri-webfont.eot');
src: url('vcouri-webfont.eot?#iefix'), /* IE4+ */
url('vcouri-webfont.woff') format('woff'),
url('vcouri-webfont.ttf') format('truetype'), /* font chuan */
url('vcouri-webfont.svg#vni-courinormal') format('svg'); /* iphone, ipad*/
}
p.addFont {
font-family: 'myFont';
}
Hiển thị trình duyệt khi có CSS:
Su dung font trong css3
Su dung font trong css3
Định dạng font được hỗ trợ bởi trình duyệt và hệ điều hành:
| Trình duyệt PC | Smartphone - Tablets | |||||||
 |  |  |  |  |  |  |  | |
| .ttf | 9 | 3.5 | 10.0 | 4 | 3.1 | 4.2 | 2.2 | 8 |
|---|---|---|---|---|---|---|---|---|
| .eot | 6 | X | X | X | X | X | X | 7.5 |
| .woff | 9 | 3.6 | 11.1 | 5 | 6.0 | 5.0 | X | 7.5 |
| svg | 9 | 2 | 9.0 | 4 | 3.1 | 3.2 | 3.0 | 8 |
- Chuyển đổi định dạng font: www.fontsquirrel.com
Trình duyệt và hệ điều hành hỗ trợ
Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho @font-face:
| Trình duyệt PC | Smartphone - Tablets | |||||||
| | | | | | | | |
| @font-face | 9 | 3.6 | 10 | 4 | 3 | 3.2 | ||
0 nhận xét: