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

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

ATPMedia Bởi ATPMedia
28/11/2019
Trang chủ 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

Bài Viết Tiếp Theo
Front End Developer Là Gì

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

Bài Viết Mới.

Thiet Ke Web Mien Phi

Những lưu ý quan trọng khi thiết kế website

19/10/2020
Tổng Hợp Cách Khởi Nghiệp Thành Công Cho Người Bắt đầu Kinh Doanh Mới Nhất Năm 2020

Tổng hợp cách khởi nghiệp thành công cho người bắt đầu kinh doanh mới nhất năm 2020

30/11/2019
Thu Hút Người Tiêu Dùng

Những Cách Thu Hút Người Tiêu Dùng Hiệu Quả Trong Kinh Doanh

01/05/2020
Lệnh Xóa Màn Hình Trong Java

tổng hợp các cách thực hiện lệnh xóa màn hình trong java mới nhất 2020

30/11/2019
In tem nhãn số lượng ít giá rẻ miễn phí thiết kế mẫu

In tem nhãn số lượng ít giá rẻ miễn phí thiết kế mẫu

28/07/2022
Cách đưa ảnh Lên Google

Hướng dẫn các cách đưa ảnh lên google mới nhất 2020

15/12/2019
Co Founder La Gi Su Khac Nhau Giua Founder Va Co Founder Moi Nhat 2020

Co-founder là gì ? Sự khác nhau giữa Founder và Co-founder mới nhất 2020

13/11/2019
Nhan Vien Trong Tiem Net Tphcm

nhan vien trong tiem net tphcm, thái độ phục vụ của những nhân viên này

30/11/2019

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

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