Định nghĩa và sử dụng
Thuộc tính font trong css3 dùng để định dạng các dạng font ngoài dạng đã được định nghĩa ở css2 (Xem thêm về font trong css2).
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ụ
Xem thêm 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:
- 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:
