• Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web
No Result
View All Result
  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web
No Result
View All Result
No Result
View All Result

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

ATPMedia by ATPMedia
28/11/2019
Home Kỹ năng Tin học
Rate this post

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

@font Face Trong Css

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

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

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';

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 điện thoại thông minh – 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
  • biến đổi định hướng font: www.fontsquirrel.com

Nguồn: internet.com

Tags: @font-face css@font-face trong cssdefine font face cssfont face scssfont-face htmlkhai báo font trong csslệnh font faceset font cssuser font face
ATPMedia

ATPMedia

Next Post
Front End Developer Là Gì

front-end developer là gì? tìm hiểu thêm về front-end developer

XÂY DỰNG WEBSITE

Coder.com.vn là Blog chia sẻ kiến thức học lập trình miễn phí. Chuyên tổng hợp các bài viết về tài liệu học lập trình, với mong muốn tất cả mọi người ở khắp nơi trên thế giới được học lập trình miễn phí.

Chuyên mục

  • Trang Chủ
  • Source Web
  • Kiến Thức Seo
  • Bảo Mật Website
  • Tài Liệu Làm Web
  • Xây Dựng Website

Phần mềm - Công cụ

  • Brands
  • Alosoft
  • Seeding
  • Top Việc
  • Tổng Hợp
  • Quản Trị Nhân Sự

Liên kết

  • Topvui
  • Xe Mô Tô
  • Quản Lý Kho
  • Blog Việc Làm
  • Giải Pháp Việc Làm
  • Phần Mềm Miễn Phí

© 2019 | Thiết Kế bởi ATP MEDIA

No Result
View All Result
  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Xây dựng website đơn giản, tối ưu chi phí, chuẩn SEO và đồng thời cũng cung cấp các kiến thức hữu ích để bất kỳ ai cũng có thể thiết kế website đơn giản.