Web Font trong CSS3

Web Font trong CSS3 cho phép lập trình viên có thể sử dụng các font mà không được cài đặt trên máy tính của người dùng. Khi bạn đã mua/tìm được font bạn muốn, bạn chỉ cần include font file này trên Web Server, và sau đó nó sẽ được tự động tải tới người dùng khi cần thiết. Các font riêng của bạn được định nghĩa trong qui tắc @font-face trong CSS3.

Các định dạng Web Font khác nhau trong CSS3

Font	Miêu tả
TrueType Fonts (TTF)	Miêu tả
OpenType Fonts (OTF)	OpenType là một định dạng cho scalable computer font và được phát triển bởi Microsoft
The Web Open Font Format (WOFF)	WOFF được sử dụng để phát triển Webpage và được phát triển vào năm 2009. Bây giờ, W3C khuyến nghị sử dụng định dạng font này
SVG Fonts/Shapes	SVG cho phép các SVG font bên trong các tài liệu SVG. Chúng ta cũng có thể áp dụng CSS cho SVG bằng cách sử dụng thuộc tính font face
Embedded OpenType Fonts (EOT)	EOT được sử dụng để phát triển và nó được nhúng vào trong các Webpage, do đó không cần đến sự trợ giúp của một font thứ ba nào đó

Quảng cáo

Ví dụ dưới đây minh họa cách sử dụng của qui tắc @font-face trong CSS:

<html>
   <head>
      <style>
         @font-face {
            font-family: myFirstFont;
            src: url(../css/font/SansationLight.woff);
         }
         div {
            font-family: myFirstFont;
         }
      </Style>
   </head>
   <body>
      <div>Vi du qui tac @font-face trong CSS3.</div>
      
      <p><b>Phan noi dung ban dau:</b>Vi du qui tac @font-face trong CSS3.</p>
   </body>
</html>

Qui tắc @font-face trong CSS

Bảng dưới đây liệt kê tất cả các phần miêu tả font có thể được đặt trong qui tắc @font-face trong CSS:

Giá trị	Miêu tả
font-family	Được sử dụng để định nghĩa tên font
src	Được sử dụng để định nghĩa URL
font-stretch	Được sử dụng để làm cho văn bản hiển thị rộng hơn hoặc hẹp đi
font-style	Được sử dụng để định nghĩa font style
font-weight	Được sử dụng để định nghĩa font weight (tính rõ ràng của font)

Quảng cáo

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: