Hướng dẫn dùng font stretched trong PHP

• 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:

HTML viết:

HỌC WEB CHUẨN

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:

HTML viết:

Su dung font trong css3
Su dung font trong css3

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