Hướng dẫn Tìm hiểu và áp dụng Web fonts

[PVS]

Tìm hiểu và áp dụng Web fonts

Việc tạo ra một font chữ là việc đòi hỏi rất nhiều kiến thức, thời gian và chất xám. Do đó, các font chữ thường được thương mại hóa, nếu bạn sử dụng một font thương mại mà convert nó sang các định dạng khác nhau để dùng cho @font-face hoặc cúfont đều là hành động vi phạm bản quyền. Chính vì thế người ta tạo ra một dịch vụ có tên là web fonts, nơi cho bạn sử dụng các font chữ có bản quyền một cách có phí và miễn phí.

Trong bài viết hôm nay, mình sẽ nói qua về lịch sử hình thành của web fonts, các web fonts phổ biến hiện tại và cách áp dụng các fonts đó vào website của bạn.

Tại sao mình không dùng được tiếng Việt?
Rất đơn giản thôi bạn, các dịch vụ Web fonts rất ít và rất hiếm có font nào hỗ trợ đầy đủ tiếng Việt. Do đó, các dịch vụ font mình giới thiệu phía trên chỉ để các bạn tham khảo về sự phát triển khá mạnh mẽ của dịch vụ Web font ở các quốc gia khác.

Google fonts API đâu nhỉ?
Trong video mình hoàn toàn không nhắc đến google fonts, nguyên nhân chính là toàn bộ video trong series này mình đã làm cách đây khoảng 2 năm trước, lúc đó chưa có google fonts hoặc nếu có thì nó cũng chưa phổ biến đến mức nhất định.
Google fonts hiện tại là một dịch vụ khá phổ biến, nguyên nhân chính là nó miễn phí và một nguyên nhân khác nữa đó là nó có hỗ trợ tiếng Việt và điều đặc biệt là nó hoàn toàn rất dễ sử dụng, chúng ta chỉ cần thao tác chọn lựa và dùng tôi.

Cách sử dụng Web fonts
Cách áp dụng Web fonts vào website của bạn rất đa dạng, tùy thuộc vào các dịch vụ cung cấp mà chúng ta sẽ có cách áp dụng khác nhau. Và đặc điểm chính là nó sẽ quản lý fonts theo domain, tức khi đăng ký, bạn sẽ khai báo domain website của mình, nó xử lý mà thấy domain của bạn không đúng thì sẽ không cho sử dụng.

Cũng khá rắc rối nhỉ? Tuy nhiên, google fonts phát triển nhanh như vậy cũng là có nguyên nhân. Cách sử dụng của nó rất đơn giản, chỉ việc click chọn, sao chép và sử dụng thôi, nó hoàn toàn miễn phí nên ta có thể áp dụng nó vào bất kỳ đâu mà ta muốn.

Trước tiên, chúng ta sẽ vào website chính của google fonts http://www.google.com/fonts/. Hiện tại thì google có khoảng 629 font families, một con số cũng khá kiêm tốn. Không đặc sắc như các dịch vụ có phí khác, nhưng nó cũng vừa đủ để chúng ta áp dụng vào một website cá nhân hoặc thương mại rồi.
Khi quan sát thì chúng ta thấy giao diện nó gồm 3 phần:

• Tay trái: panel dùng để phân loại fonts
• Tay phải: khu vực hiển thị chế độ xem trước cho các font chữ
• Bên dưới màng hình: Là khu vực các font đã được chọn để làm việc

​

Các bạn cũng phải lưu ý là muốn dùng tiếng Việt thì hãy nhìn bên panel phân loại, có filter là script, các bạn chọn ngôn ngữ hỗ trợ là Vietnamese chúng ta có khoảng 12 font families để sử dụng, hãy chọn loại font mà bạn muốn, sau đó nhấp vào nút “Add to Collection” để làm việc lúc đó thì panel bên dưới màng hình sẽ hiển thị cho chúng ta lựa chọn, các bạn chọn tiếp tab “Use” để qua phần áp dụng web fonts vào website.

Giờ thì các bạn có thể lựa chọn các style của font như độ đậm, in nghiêng,…. Lưu ý: Càng lựa chọn nhiều thì website của chúng ta sẽ càng load lâu hơn đấy. Đặc biệt là đôi lúc nó load được hết các thành phần khác rồi, nhưng vẫn chưa hiển thị chữ. Đó là một nhược điểm của web fonts. Hãy cố gắng tối ưu bằng cách lựa chọn các font, nhưng đồng hồ “Page Load” vẫn ở mức màu xanh.

​

Đặc biệt quan trọng, ở mục “Choose the character sets you want:” bạn phải chọn nhóm ký tự “Vietnamese (vietnamese)” nếu không thì nó sẽ không hỗ trợ tiếng Việt đâu nhé. Muốn chắc ăn thì chọn thêm “Latin Extended (latin-ext)” nữa là ổn.

​

Bây giờ chúng ta có 3 cách chèn vào website. Tuy nhiên, mình vẫn khuyến khích các bạn dùng cách @import hoặc Standard, vì đụng đến javascript thì bạn nào yếu sẽ khá phiền phức.
Nếu dùng @import thì copy đoạn code đó, đưa vào đầu tập tin css của chúng ta.
Nếu dùng kiểu truyền thống Standard thì chỉ việc copy nó vào bên trong khu vực thẻ head là ổn.

​

Bước cuối cùng, chúng ta chỉ việc copy đoạn code font-family để áp dụng vào bất kỳ thẻ hoặc id, class nào trong css mà chúng ta muốn thôi.

​

Lưu ý: đoạn code do google đưa ra nhé.

body {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
.web-font{
font-family: 'Open Sans Condensed', sans-serif;
font-size: 13px;
line-height:17px;
}

Kết luận
Tuy rằng dùng web fonts thì rất hay, nhưng mà đối với Việt Nam mình thì nó cũng chẳng đặc sắc gì mấy, vì chúng chưa hỗ trợ được nhiều font tiếng Việt đẹp. Vấn đề bản quyền cũng là một phần nhức nhối, tuy nhiên, bạn hoàn toàn có thể gửi mail và hỏi xin được convert font để áp dụng vào @font-face hoặc cufon. Đó là cách mà mình thường hay sử dụng khi áp dụng các font chữ đặc biệt vào website của mình.

Chúc các bạn thành công.

Nguồn: izwebz.com​