Sử dụng Phông chữ Tuỳ chỉnh trên Trang Web
Nội dung văn bản luôn là một phần quan trọng của trang web, nhưng trong những ngày đầu của Web, các nhà thiết kế và nhà phát triển bị giới hạn nghiêm trọng trong việc kiểm soát typographic mà họ có trên các trang web của họ. Điều này bao gồm một giới hạn trong các phông chữ mà họ có thể sử dụng đáng tin cậy trên các trang web của họ. Bạn có thể đã nghe thuật ngữ "phông chữ an toàn trên web" được đề cập trong quá khứ. Điều này đề cập đến một bộ phông chữ nhỏ có khả năng được đưa vào máy tính của một người, có nghĩa là nếu trang web của bạn sử dụng một trong các phông chữ đó, đó là một cược an toàn sẽ được hiển thị chính xác trên trình duyệt của một người.
Hôm nay, các chuyên gia web có một loạt các phông chữ mới và các tùy chọn loại để làm việc với, một trong số đó là định dạng WOFF.
WOFF là gì?
WOFF là từ viết tắt của “Web Open Font Format.” Nó được sử dụng để nén phông chữ để sử dụng với thuộc tính CSS @ font-face. Đó là một cách để nhúng phông chữ trong các trang web để bạn có thể sử dụng phông chữ chuyên biệt vượt ra ngoài điển hình "Arial, Times New Roman, Georgia" - đó là một số trong những phông chữ an toàn trên web nói trên.
WOFF đã được gửi tới W3C như một tiêu chuẩn để đóng gói phông chữ cho các trang web. Nó đã trở thành một bản thảo làm việc vào ngày 16 tháng 11 năm 2010. Hôm nay chúng tôi thực sự có WOFF 2.0, giúp cải thiện khả năng nén từ phiên bản đầu tiên của định dạng thêm gần 30%. Trong một số trường hợp, các khoản tiết kiệm này thậm chí có thể còn nhiều hơn nữa!
Tại sao sử dụng WOFF?
Phông chữ web, bao gồm cả phông chữ được phân phối qua định dạng WOFF, cung cấp nhiều lợi thế hơn các lựa chọn phông chữ khác. Hữu ích như những phông chữ web an toàn này, và chắc chắn vẫn là nơi dành cho những phông chữ đó trong công việc của chúng tôi, nó cũng tốt để mở rộng lựa chọn của chúng tôi và mở ra các tùy chọn typographic của chúng tôi.
Phông chữ WOFF có các lợi ích sau:
- Họ có thể truy cập dễ dàng hơn so với phông chữ dưới dạng hình ảnh. WOFF phong cách văn bản HTML thuần túy với CSS, giúp bạn có khả năng truy cập và kiểm soát thiết kế mà hình ảnh sẽ không cho phép.
- Các tệp WOFF bao gồm thông tin về kiểu chữ như các dạng ngữ cảnh và các hình dạng kiểu cũ. Điều này mang lại cho trang web của bạn kiểu chữ tốt hơn bởi vì bạn đang sử dụng các ký tự chính xác, không chỉ là các phép tính xấp xỉ.
- Phông chữ WOFF có thể giúp quốc tế hóa vì bạn có thể nhúng phông chữ với các ký tự từ các ngôn ngữ khác.
- Giống như tất cả các văn bản theo kiểu CSS, phông chữ được tạo kiểu với WOFF là công cụ tìm kiếm thân thiện hơn. Công cụ tìm kiếm không "nhìn thấy" văn bản được nhúng trong một hình ảnh, và trong khi văn bản ALT có thể giúp, không có thay thế cho văn bản riêng của mình.
- Phông chữ WOFF được nén, vì vậy chúng nhỏ hơn các loại tệp phông chữ khác. Điều này sẽ giúp với tốc độ tải xuống trang web và hiệu suất tổng thể.
- Bạn có thể sử dụng các tệp WOFF để bảo vệ danh tính thương hiệu của mình bằng cách nhúng phông chữ công ty của bạn dưới dạng tệp WOFF.
Hỗ trợ trình duyệt WOFF
WOFF có hỗ trợ trình duyệt tuyệt vời trong các trình duyệt hiện đại, bao gồm:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11,1+
- Safari 5.1+
Nó chủ yếu được hỗ trợ trên bảng những ngày này, với ngoại lệ duy nhất là tất cả các phiên bản của Opera Mini.
Cách sử dụng phông chữ WOFF
Để sử dụng tệp WOFF, bạn cần tải tệp WOFF lên máy chủ web của mình, đặt tên cho thuộc tính @ phông mặt và sau đó gọi phông chữ trong CSS của bạn. Ví dụ:
- Tải lên phông chữ có tên myWoffFont.woff vào thư mục / phông chữ của máy chủ web.
- Trong tệp CSS của bạn, hãy thêm phần @ font-face:
@mặt chữ {
font-family: myWoffFont;
định dạng src: url ('/ fonts / myWoffFont.woff') ('woff');
}
- Thêm tên phông chữ mới (myWoffFont) vào ngăn xếp phông chữ CSS của bạn, giống như bạn sẽ làm bất kỳ tên phông chữ nào khác:
p {
họ phông chữ: myWoffFont , Geneva, Arial, Helvetica, sans-serif;
}
Nơi nhận phông chữ WOFF
Có hai nơi tuyệt vời bạn có thể tìm thấy rất nhiều phông chữ WOFF miễn phí cho mục đích thương mại và phi thương mại:
- Mở thư viện phông chữ
- Font Squirrel
Nếu bạn có giấy phép sử dụng phông chữ không có sẵn trong định dạng WOFF, bạn có thể sử dụng trình tạo WOFF như Font Squirrel để chuyển đổi các tệp phông chữ của bạn thành các tệp WOFF. Ngoài ra còn có một công cụ dòng lệnh được gọi là sfnt2woff mà bạn có thể sử dụng trên Macintosh và Windows để chuyển đổi các phông chữ TrueType / OpenType thành WOFF.
Tải xuống tệp nhị phân phù hợp với hệ thống của bạn và chạy nó ở dòng lệnh (hoặc Thiết bị đầu cuối) và làm theo hướng dẫn.
Ví dụ về WOFF
Dưới đây là một vài ví dụ về tệp WOFF: Trang WOFF trên HTML5 trong 24 giờ.
Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào ngày 7/11/17