Mục lục:
- Mặc dù tất cả các trình duyệt hiện đại đều hỗ trợ tính năng font chữ-fonts, các loại tệp thực tế được hỗ trợ thay đổi từ trình duyệt sang trình duyệt. Dưới đây là các kiểu phông chính:
Video: Tự phát nhạc nền trên website | Tủ Sách Vàng 2025
Mặc dù nhà phát triển web HTML5 có thể đề xuất bất kỳ phông chữ nào cho trang web, các tệp phông chữ thường là tài sản cấp khách hàng. Nếu khách hàng không cài đặt phông chữ, cô ấy sẽ không nhìn thấy nó. May mắn thay, CSS3 hỗ trợ một giải pháp hợp lý để cung cấp các phông chữ có thể tải xuống được.
Phong cách không hoạt động như hầu hết các yếu tố CSS. Nó không áp dụng đánh dấu vào một phần của trang. Thay vào đó, nó định nghĩa một giá trị CSS mới có thể được sử dụng trong các đánh dấu khác. Cụ thể, nó cho phép bạn đặt một tập tin font trên máy chủ của bạn và xác định một gia đình phông chữ bằng cách sử dụng phông chữ đó.
@ font-face {font-family: "Miama"; src: url ("Miama. otf");}
thuộc tính font-family cho biết tên bạn sẽ đưa ra phông chữ này trong phần còn lại của mã CSS của bạn. Thông thường nó cũng tương tự như tên file font. Thuộc tính font-gia đình là URL của tệp font thực tế như nó được tìm thấy trên máy chủ. Sau khi một mặt phông đã được xác định, nó có thể được sử dụng trong một thuộc tính bình thường trong phần còn lại của mã CSS của bạn:
h1 {font-family: Miama;}
Đây là mã cho ví dụ về phông chữ tùy chỉnh:
EmbeddedFont @ font-face {font-family: "Miama"; src: url ("Miama. otf");} @ font-face {font-family: "spray"; src: url ("ideoma_SPRAY. otf");} h1 {font-family: Miama; Đây là một phông chữ tùy chỉnh khác
Mặc dù tất cả các trình duyệt hiện đại đều hỗ trợ tính năng font chữ-fonts, các loại tệp thực tế được hỗ trợ thay đổi từ trình duyệt sang trình duyệt. Dưới đây là các kiểu phông chính:
TTF:
Định dạng TrueType chuẩn được hỗ trợ tốt, nhưng không phải bởi tất cả các trình duyệt. Nhiều phông chữ mã nguồn mở có sẵn ở định dạng này.-
OTF: Điều này cũng tương tự như TTF, nhưng là một tiêu chuẩn thực sự mở, vì vậy nó được ưa thích bởi những người quan tâm đến các tiêu chuẩn mở. Nó được hỗ trợ bởi hầu hết các trình duyệt trừ IE.
-
WOFF: WOFF là định dạng tiêu chuẩn được đề xuất hiện đang được Firefox hỗ trợ. Microsoft đã gợi ý hỗ trợ định dạng này trong IE.
-
EOT: Đây là định dạng font độc quyền của Microsoft. Nó chỉ hoạt động trong IE, nhưng để công bằng, Microsoft đã có hỗ trợ nhúng font trong nhiều năm.
-
Bạn có thể sử dụng công cụ chuyển đổi font như onlinefontconverter. com / để chuyển đổi sang bất kỳ định dạng font bạn thích. Có thể cung cấp nhiều thuộc tính src. Bằng cách này, bạn có thể bao gồm cả phiên bản EOT và OTF của phông chữ để nó có thể hoạt động trên nhiều trình duyệt khác nhau.
Khi bạn sử dụng kỹ thuật này, bạn cần phải có một bản sao của tệp phông chữ cục bộ.Nó phải nằm trong cùng thư mục với trang web của bạn. Khi bạn bắt đầu lưu trữ trên máy chủ web, bạn sẽ muốn di chuyển tệp phông chữ của mình tới máy chủ cùng với tất cả các tài nguyên khác mà trang web của bạn cần. Chỉ vì bạn có thể bao gồm một phông chữ không có nghĩa là bạn nên. Hãy suy nghĩ cẩn thận về khả năng đọc.
Cũng nên tôn trọng sở hữu trí tuệ. May mắn thay có rất nhiều phông chữ nguồn mở miễn phí xuất hiện. Bắt đầu bằng cách xem Open Font Library. Phông chữ của Google là một tài nguyên tuyệt vời khác cho phông chữ miễn phí. Với công cụ Google Font, bạn có thể chọn một phông chữ được nhúng trên các máy chủ của Google và bạn có thể sao chép mã làm cho phông chữ có sẵn mà không cần phải tải xuống.
