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:

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).

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
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
.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

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
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
@font-face 9 3.6 10 4 3 3.2 2.2 7.5