@font-face trong css là một trong những từ khóa được search nhiều nhất trên google về chủ đề @font-face trong css. Trong bài viết này,xaydungweb.vn sẽ viết bài viết Hướng dẫn các @font-face trong css mới nhất 2020.

Hướng dẫn các @font-face trong css mới nhất 2020.

khái niệm và dùng

thuộc tính font trong css3 sử dụng để định dạng các dạng font ngoài dạng vừa mới được khái niệm ở 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ị	gợi ý	mô tả
font-family	tên	font-family: myFont;	định hì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;	dựng lại font đậm hay k.
src	url(đường dẫn font)	src: url(files/vcouri.ttf);	định hình đường dẫn font chữ được load.
unicode-range	phạm vi unicode	unicode-range: U+0020-U+007e;	định hì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;	dựng lại văn bản rộng hơn hay hẹp hơn. (Thuộc tính này luôn luôn chưa được hỗ trợ bởi trình duyệt).

ví dụ

nhìn thấy thêm ví dụ

HTML viết:

Su dung font trong css3

Hiển thị trình duyệt khi chưa có CSS:

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

dùng mẹo 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';