Love beautiful code? We do too.
- Home
- Tutorial
- Thuộc tính CSS & CSS3
- Thuộc tính font trong CSS3
Thuộc tính font trong CSS3
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ụ
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
Đị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 | 2.2 | 7.5 |
0 Bình luận
- Thuộc tính CSS
- Mở đầu
- Thuộc tính background
- Thuộc tính border
- Thuộc tính border-collapse
- Thuộc tính border-spacing
- Thuộc tính bottom
- Thuộc tính caption-side
- Thuộc tính clear
- Thuộc tính clip
- Thuộc tính color trong CSS
- Thuộc tính content trong CSS
- Thuộc tính counter-increment trong CSS
- Thuộc tính counter-reset trong CSS
- Thuộc tính cursor trong CSS
- Thuộc tính direction trong CSS
- Thuộc tính display trong CSS
- Thuộc tính empty-cells trong CSS
- Thuộc tính float trong CSS
- Thuộc tính font trong CSS
- Thuộc tính height trong CSS
- Thuộc tính left trong CSS
- Thuộc tính letter-spacing trong CSS
- Thuộc tính line-height trong CSS
- Thuộc tính list-style trong CSS
- Thuộc tính margin trong CSS
- Thuộc tính max-height trong CSS
- Thuộc tính max-width trong CSS
- Thuộc tính min-height trong CSS
- Thuộc tính min-width trong CSS
- Thuộc tính outline trong CSS
- Thuộc tính overflow trong CSS
- Thuộc tính padding trong CSS
- Thuộc tính page-break-after trong CSS
- Thuộc tính page-break-inside trong CSS
- Thuộc tính position trong CSS
- Thuộc tính quotes trong CSS
- Thuộc tính right trong CSS
- Thuộc tính table-layout trong CSS
- Thuộc tính text-align trong CSS
- Thuộc tính text-decoration trong CSS
- Thuộc tính text-indent trong CSS
- Thuộc tính text-transform trong CSS
- Thuộc tính top trong CSS
- Thuộc tính vertical-align trong CSS
- Thuộc tính visibility trong CSS
- Thuộc tính white-space trong CSS
- Thuộc tính width trong CSS
- Thuộc tính word-spacing trong CSS
- Thuộc tính z-index trong CSS
- Thuộc tính CSS3
- Thuộc tính animation trong CSS3
- Thuộc tính appearance trong CSS3
- Thuộc tính backface-visibility trong CSS3
- Thuộc tính background trong CSS3
- Background gradient trong CSS3
- Nhiều background trong CSS3
- Thuộc tính border-image
- Thuộc tính border-radius trong CSS3
- Thuộc tính box trong CSS3
- Thuộc tính column trong CSS3
- Thuộc tính font trong CSS3
- Thuộc tính font-size-adjust trong CSS3
- Thuộc tính @keyframes trong CSS3
- Thuộc tính nav trong CSS3
- Thuộc tính opacity trong CSS3
- Thuộc tính perspective trong CSS3
- Thuộc tính perspective-origin trong CSS3
- Thuộc tính resize trong CSS3
- Thuộc tính text trong CSS3
- Thuộc tính transform trong CSS3
- Thuộc tính transition trong CSS3
- Thuộc tính word-break trong CSS3
- Thuộc tính word-wrap trong CSS3
Hoclaptrinh.vn © 2017
From Coder With
Unpublished comment
Viết câu trả lời