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

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

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)

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 code24h.com:

Bài liên quan

Web Safe Font trong CSS

Tổ hợp Font trong CSS CSS3 tương thích với công nghệ tổ hợp Font. Tức là, nếu trình duyệt không hỗ trợ Font đầu tiên, thì nó sẽ cố gắng thử các Font tiếp theo. Serif Font trong CSS Font family Normal bold Georgia, serif Cau van nay duoi dang Normal Text. Cau van nay ...

Tạ Quốc Bảo viết 12:42 ngày 14/08/2018

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

Hoàng Hải Đăng viết 12:32 ngày 14/08/2018

Bài 17 - Cách sử dụng icon font trong thiết kế web

Chào các bạn! Ngày nay thiết kế web ngày càng phát triển và ngày càng có nhiều kỹ thuật mới được sử dụng, một trong những kỹ thuật khá hay đó là dùng icon font . Khái niệm chắc các bạn cũng đã từng nghe và sử dụng. Tuy nhiên, bạn dùng nó nhưng bạn đã hiểu khái niệm thực sự của icon font là gì ...

Trịnh Tiến Mạnh viết 17:18 ngày 12/08/2018

DỰ ĐOÁN 7 XU HƯỚNG WEB DESIGN TRONG NĂM 2017

Link: http://brian.hatenablog.jp/entry/web-trend-for-2017 Thế giới luôn biến đổi không ngừng với tốc độ chóng mặt. Trung Quốc trong khoảng thời gian ngắn đã phát triển đạt mức GDP hơn cả Nhật Bản. Cùng với đó ,mảng web design cũng không nằm ngoài vòng xoáy phát triển đó. Tôi đã có 12 năm ...

Tạ Quốc Bảo viết 14:13 ngày 12/08/2018

min() and max() trong CSS3

Xin chào các bạn,lần trước mình đã giới thiệu qua một tính năng mạnh mẽ của CSS3 là calc() function, hôm nay mình sẽ đưa đến một tính năng khác cũng đơn giản nhưng không kém phần thú vị, đó là min() và max(). Mình nghĩ, nếu bạn biết qua calc() thì chắc bạn cũng sẽ không thể làm ngơ với min() ...

Hoàng Hải Đăng viết 13:13 ngày 12/08/2018
0