- Trang chủ
- Tham khảo
- CSS
- Thuộc tính font
Định nghĩa và sử dụng
Thuộc tính font thiết lập font cho thành phần, bao gồm font chữ, độ rộng, ...
Cấu trúc
Với giá trị như sau:
font-family | giá trị font | font-family: Arial, Helvetica, sans-serif; | Xác định giá trị font family cho chữ. |
font-size | Kích cỡ | font-size: 120%; | Xác định kích cỡ của chữ, đơn vị có thể là px, em, %, ... |
font-size-adjust | Chỉ Firefox hỗ trợ thuộc tính này, nên ít được dùng tới. | ||
font-stretch | Hiện tại các trình duyệt không hỗ trợ thuộc tính này. | ||
font-style | normal italic oblique | font-style: italic; | Xác định loại chữ. |
font-variant | normal small-caps inherit | font-variant: small-caps; | Chuyển đổi kiểu chữ (thường thành hoa). |
font-weight | bold normal Giá trị | font-weight: bold; | Hiển thị chữ đậm hay thường. |
HTML viết:
<html> <head></head> <body> <p>HỌC WEB CHUẨN</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
CSS viết:
Hiển thị trình duyệt khi có CSS:
Trình duyệt hỗ trợ
Thuộc tính font được hỗ trợ trong đa số các trình duyệt.
Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype
- Trang chủ
- Tham khảo
- CSS
- CSS3
- Thuộc tính font
Đị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:
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). |
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 | ||||||
9 | 3.5 | 10.0 | 4 | 3.1 | 4.2 | 2.2 | 8 |
6 | X | X | X | X | X | X | 7.5 |
9 | 3.6 | 11.1 | 5 | 6.0 | 5.0 | X | 7.5 |
9 | 2 | 9.0 | 4 | 3.1 | 3.2 | 3.0 | 8 |
- Chuyển đổi định dạng font: www.fontsquirrel.com