Thứ Năm, 18 tháng 6, 2015

Trang chủ » » Thuộc tính @fontface trong css3

Thuộc tính @fontface trong css3

Đăng bởi Không có bình luận học thiết kế web
Hướng dẫn thuộc tính @fontface trong css3 tài liệu css

Cấu trúc

@font-face {
    thuộc tính: giá trị;
}

Thuộc tính của font trong css3:

Thuộc tínhgiá trịVí dụMô tả
font-familytênfont-family: myFont;Xác định tên cho font chữ.
font-stylenormal
italic
oblique		font-style: italic;Xác định loại cho font chữ.
font-weightnormal
bold
100
200
300
400
500
600
700
800
900		font-weight: bold;Xác định font đậm hay không.
srcurl(đường dẫn font)src: url(files/vcouri.ttf);Xác định đường dẫn font chữ được load.
unicode-rangephạm vi unicodeunicode-range: U+0020-U+007e;Xác định phạm vi của các ký tự unicode được hỗ trợ.
font-stretchnormal
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

học thiết kế web ở Hà Nội

0 nhận xét:

Đăng nhận xét