Sử dụng web font như thế nào - Guide hoàn chỉnh từ BeauType

Bài viết này sẽ đem đến các kiến thức cơ bản dễ nắm vững và dễ áp dụng. Chúng tôi cũng sẽ cung cấp các nguồn chuyên sâu hơn để giúp các developer có thể hoàn thiện tất cả các khía cạnh của việc sử dụng web font.

Font formats

Khi bạn thiết kế hoặc mua bản quyền web font, bạn sẽ nhận được một gói tệp font bao gồm các định dạng sau:

Web Open Font Format (WOFF): Được phát triển vào năm 2009 dưới dạng wrapper cho font TrueType và OpenType. WOFF nén các tệp file và được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Web Open Font Format 2 (WOFF2): Đây là bản cập nhật cho định dạng WOFF gốc. Được phát triển bởi Google, đây được coi là định dạng tốt nhất vì nó cung cấp các kích thước tệp nhỏ hơn và hiệu suất tốt hơn cho các trình duyệt hiện đại.

TrueType (TTF): Đây là một định dạng font được phát triển bởi Microsoft và Apple vào những năm 1980. Tệp TTF hiện đại còn được gọi là font TrueType OpenType. TTF khá hữu ích để mở rộng sự hỗ trợ cho các trình duyệt cũ hơn, đặc biệt là trên điện thoại di động nếu bạn cần.

Embedded OpenType (EOT): Đây là một định dạng kế thừa do Microsoft phát triển. Các phiên bản Internet Explorer cú hơn yêu cầu EOT để hiển thị web font. EOT thường được serve dưới dạng không nén, vì vậy, nếu bạn không yêu cầu hỗ trợ trình duyệt IE8 trở xuống, bạn sẽ không cần định dạng này.

Nếu bạn chủ yếu nhắm tới người dùng và trình duyệt hiện đại, WOFF và WOFF2 là đủ. Hai định dạng này cung cấp khả năng nén tốt nhất và cho phép bạn xử lý ít tệp hơn trong bộ code. 

Nếu thiết bị người dùng quá cũ đến mức không hỗ trợ một trong hai định dạng này, bạn nên cung cấp chỉ một font hệ thống duy nhất để đảm bảo hiệu suất. Nếu bạn cần mở rộng sự hỗ trợ, hãy lựa chọn TTF.

Embed Web Fonts

@font-face là một giao thức để thêm font vào CSS. Đây là mức sử dụng sâu nhất trên web, hỗ trợ tất cả các định dạng tệp mà chúng ta đã nhắc đến ở trên.

@font-face { 
font-family: FontName;  
src: url('path/filename.woff2') format('woff2'), url('path/filename.woff') format('woff'), url('path/filename.ttf') format('truetype'); 
}

Bạn có thể bỏ đi một chút code nếu chỉ cần hỗ trợ các trình duyệt hiện đại:

@font-face { 
font-family: FontName; 
src: url('path/filename.woff2') format('woff2'), url('path/filename.woff') format('woff'); 
}

Sau khi hệ thống đã nhận font, ta có thể bắt đầu sử dụng font cho các đối tượng khác nhau. Ví dụ:

body { 
font-family: 'FontName', Helvetica, Arial, sans-serif; 
}

Host Web Fonts

Cách linh hoạt nhất để sử dụng web font là tự host. Nghĩa là bạn lưu trữ các tệp trên máy chủ riêng mình và font sẽ luôn có sẵn để sử dụng khi khách truy cập vào trang web mà không cần sự phụ thuộc vào một bên thứ ba. Bạn sẽ không cần track code hoặc Javascript để tải các tệp font tự host.

Khi bạn ký hợp đồng phát triển custom typeface, hãy để ý liệu bạn có thể tải xuống để tự lưu trữ và host, vì theo quan điểm của chúng tôi, đó vẫn là cách tốt nhất để sử dụng. Một vài bên cung cấp giải pháp lưu trữ hộ, nhưng cũng khiến bạn phụ thuộc vào dịch vụ lưu trữ và cam kết về khả năng hoạt động của họ.

Điều này dẫn đến lưu ý sau: Hãy đảm bảo là bạn hiểu hợp đồng sử dụng web font của bên cung cấp, vì sự khác biệt về lựa chọn lưu trữ và điều khoản sử dụng có thể ảnh hưởng đến cách bạn triển khai typeface. 

Tại Beau, chúng tôi luôn cung cấp đầy đủ giấy phép và tệp file để khách hàng có thể tự lưu trữ và host trên bất kỳ nền tảng nào.

Đọc thêm: Cách custom typeface - font chữ độc quyền tạo ra sức mạnh thương hiệu cho tập đoàn

Tính năng nâng cao

Hãy xem xét một số tính năng nâng cao hơn của web font. 

Spacing và Kerning

Đây là hai cài đặt bạn có thể sử dụng trong tệp file web font để xác định khoảng cách giữa các ký tự:

• Spacing: Sử dụng thông số này để điều chỉnh side bearing - khoảng cách ở bên trái và bên phải của mỗi ký tự.
• Kerning: Sử dụng thông số này để điều chỉnh sự kết hợp khoảng cách giữa các ký tự cụ thể.

Trên website, bạn không thể tắt spacing vì nếu không trình duyệt sẽ không thể render được các kỹ tự. Tuy nhiên, một số trình duyệt cũ hơn có thể tắt kerning theo mặc định và bạn cần bật lên trong file CSS.

Kiểm soát kerning thật ra khá dễ dàng, đây là cách để kích hoạt trên tất cả các trình duyệt.

p { 
font-feature-settings: "kern" 1; font-kerning: normal; 
}

Nếu bạn không sử dụng Autoprefixer để giúp quản lý trình duyệt trong CSS thì bạn sẽ cần ghi thủ công các prefix cho cài đặt kerning để mở rộng sự hỗ trợ cho các trình duyệt cũ hơn.

/* All vendor prefixes for `font-feature-settings` */ 
p { 
-moz-font-feature-settings: "kern" 1; 
-ms-font-feature-settings: "kern" 1; 
-o-font-feature-settings: "kern" 1; 
-webkit-font-feature-settings: "kern" 1; 
font-feature-settings: "kern" 1; 
font-kerning: normal; 
}

Tính năng nâng cao cho OpenType

Bạn cũng có thể sử dụng cài đặt để kiểm soát nhiều tính năng nâng cao khác với OpenType. Có rất nhiều tiềm năng sử dụng và bạn cũng không cần sử dụng nhiều file để có được một hiệu ứng. Tuy nhiên, hãy hỏi xem liệu font designer của bạn có sử dụng các tính năng của OpenType hay không.

Để mô tả cách các tính năng nâng cao của OpenType có thể được sử dụng cùng nhau, hãy xem đoạn code sau. Đoạn code này sẽ kích hoạt các ký tự số của font để hỗ trợ của chữ số cơ bản (onum) và chữ số tỷ lệ (pnum), đồng thời bật kerning và vài style khác trong font:

.my-element { 
font-feature-settings: "onum" 1, "pnum" 1, "kern" 1, "ss01" 1; 
}

Dưới đây là danh sách các tính năng bạn có thể dùng trong cách kiểu typeface:

• kern: Kerning rất quan trọng để có khoảng cách hợp lý giữa các ký tự. Mặc định bật.
• liga: Các kiểu chữ ghép phổ biến như fi và fl. Mặc định bật.
• dlig: Các kiểu chữ ghép hiếm gặp hơn và có thể không cần luôn bật. Ví dụ như sự kết hợp giữa s và t.
• calt: Các lựa chọn hiển thị tuỳ theo ngữ cảnh, thường dùng với các kiểu chữ script.
• smcp: Small Caps để biến chữ cái thường thành chữ hoa nhỏ, trong khi các chữ viết hoa thì vẫn giữ nguyên.
• c2sc: Small Caps from Caps. Nếu bạn muốn tất cả các ký tự trong một câu có kích cỡ giống nhau, tính năng này sẽ biến cả chữ hoa thành chữ hoa nhỏ. Thường dùng với Small Caps.
• lnum: Lining numerals - Đặt các số trên một đường baseline và có cùng chiều cao với các chữ viết hoa.
• onum: Old style numeral thường được dùng nhiều trong văn bản bodycopy, đặc biệt là với các kiểu chữ serif. Một số con số nằm bên dưới đường cơ sở và có chiều cao thay đổi để phù hợp với chữ.
• pnum: Proportional numeral - số tỷ lệ sẽ chiếm nhiều hoặc ít không gian tuỳ theo con số.
• tnum: Tabular numeral - các chữ số dạng bảng chiếm diện tích giống nhau.
• ss01-ss20: Các set style chứa các thiết kế thay thế cho các chữ cái nhất định. Sử dụng để mở rộng khả năng typeface.

Spacing ký tự và Spacing từ

CSS từ lâu đã hỗ trợ các thuộc tính khoảng cách giữa các chữ và các từ. Khi sử dụng đúng cách, cả hai đều cung cấp khả năng kiểm soát với cách typeface hiển thị.

Như với typography, bạn sẽ cần học cách đánh giá các tuỳ chọn khác nhau cả về mặc chức năng lẫn hình ảnh và đưa ra các quyết định đúng đắn. Các bối cảnh khác nhau đem đến các nhu cầu về khoảng cách khác nhau.

Ở kích thước nhỏ hơn, hầu hết các kiểu chữ sẽ đẹp hơn với việc thêm khoảng cách giữa các ký tự và từ. Trong các ngữ cảnh lớn hơn, như tiêu đề, kiểu chữ có thể cần khoảng cách hẹp hơn. Trong cả hai trường hợp, những quyết định đúng đắn đòi hỏi sự chú ý và phán đoán tốt nhất của designer.

Đọc thêm: Custom brand typeface và các tập đoàn lớn: Yếu tố song hành cùng sự phát triển

Font render

Sử dụng typeface trên màn hình sẽ cần cân nhắc về cách render. Typeface thường được thiết kế trên lưới grid khoảng 1000 đơn vị hoặc lớn hơn, nhưng lại hiển thị ở môi trường bé font chỉ 16px.

Do tác động qua lại giữa thiết bị, màn hình, và phần mềm, việc giảm độ phân giải đòi hỏi một số quyết định thông minh để làm cho font chữ nhỏ dễ nhìn và đẹp mắt. Hãy kiểm tra trên nhiều trình duyệt và phát đoán để đưa ra phương án tốt nhất.

Nguồn tham khảo web font

Nếu bạn đã sẵn sàng để tìm hiểu sâu hơn về web font, đây là vài nguồn tham khảo mà bạn có thể sử dụng:

• Clagnut’s OpenType CSS Sandbox của Richard Rutter: Một nơi để bạn thử các tính năng của OpenType và xem các code CSS cần thiết.
• Webfont Handbook của Bram Stein: Một cuốn sách chuyên sâu để đọc về web font, font rendering, và hiệu năng font.
• Copy Paste Character: Một website để lấy về bất kỳ ký tự đặc biệt nào mà bạn muốn sử dụng. 
• @font-face của CSS Tricks: Bài viết này cung cấp các đoạn mã để khai báo web font dựa trên sự hỗ trợ của trình duyệt.

Các lựa chọn nâng cao hơn nữa cho web font

Đối với những ai đã sẵn sàng nâng cấp lên các kỹ thuật nâng cao hơn nữa, đây là những lựa chọn của bạn:

Tải font bản quyền lên Github

Nếu bạn commit một project vào một public repo và sử dụng các tệp font có bản quyền, hãy đảm bảo rằng chúng nằm trong tệp .gitignore để không bị tự động tải lên. Làm vậy sẽ ngăn người khác lấy và sử dụng tệp font, đồng thời ngăn vi phạm các điều khoản sử dụng của các font bản quyền.

Load web font

Để load web font, bạn có thể đơn giản sử dụng @font-face nhưng không chắc điều này sẽ có hiệu suất tốt nhất. Hãy đọc bài viết  “A Comprehensive Guide to Font Loading Strategies” của Zach Leatherman để xem các phương pháp cải thiện khả năng load và trải nghiệm người dùng.

CSS Text Decoration

W3C đã ra mắt CSS Text Decoration Module Level 3 vào tháng 8 năm nay để giúp ích cho việc trang trí các ký tự, chủ yếu là về hiển thị gạch chân tốt hơn và dễ hơn trong CSS. Hãy thử dùng xem.

Lời cuối

Bài viết này có rất nhiều thông tin, nên hy vọng bạn đã có thể hiểu rõ về cách thức web font hoạt động và tất cả những cách thú vị để áp dụng vào chính website công ty của mình.

Nếu bạn cần hỗ trợ, hãy liên hệ với chúng tôi tại BeauType để phát triển và triển khai một custom typeface cho thương hiệu.