4 Tuyệt chiêu với Google Fonts mà bạn nên biết

0
238

google_fonts-dark

Google Fonts đang được sử dụng ở hầu hết các trang web trong 5 năm trở lại đây. Và nếu bạn là một lập trình viên font-end thì ít nhất trong đời bạn phải sử dụng nó một lần.

Trong khi các font chữ bây giờ đều có bản quyền và khi bạn muốn sử dụng thì phải trả phí. Thì bên cạnh đó Google Fonts cung cấp cho bạn một giải pháp tuyệt vời chỉ với 0$ bạn có thể sử dụng tất cả những fonts chữ do Google cung cấp cả luôn việc lưu trữ các fonts chữ ấy.

Có rất nhiều lời khuyên bổ ích về việc sử dụng Google Fonts. Trong bài viết này tôi sẽ trình bày 4 nội dung chính

Mẹo #1: Gọi nhiều fonts chỉ trong cùng một request

Sử dụng fonts chữ khác nhau trong tiêu đề và nội dung. Có thể cải thiện khả năng đọc cho website của bạn. Tuy nhiên nếu mỗi fonts chữ phải gửi một request có thể làm chậm website của bạn. Tôi có ý này khá hay, ví dụ bạn muốn sử dụng 2 fonts chữ Lato và Raleway. Bạn có thể gọi cả fonts chữ chỉ trong một request như sau:

 

Mặc dù phương pháp này không làm giảm dung lượng tải fonts. Nhưng rõ ràng đã giảm được một yêu cầu http. Và điều này đã chứng minh là giúp tăng tốc độ tải trang của bạn hơn.

Bên cạnh đó chỉ với một dòng ngắn gọn bạn đã có thể quan sát hết được những fonts nào mà website bạn đang sử dụng

Mẹo #2: Chỉ định Font-Styles của fonts chữ ngay trong request

Đôi khi bạn muốn xác định kiểu font chữ in đậm (b) hoặc in nghiêng (i) bạn phải tải fonts đó từ Google và sử dụng. Tôi có cách này nhanh hơn. Hãy xem vi dụ nhé:

 

Đấy! Bạn có thể sử dụng các tag như bi để tải fonts chữ mong muốn

Nếu bạn muốn sử dụng font chữ với  độ đậm dựa theo chỉ số. Bạn có thể làm như sau:

 

Và cuối cùng nếu bạn không thích viết tắt. Có thể sử dụng đầy đủ như sau:

 

Một số fonts chữ có hỗ trợ những kịch bản như: Latin,Vietnamese, đôi khi là Hy Lạp. Để sử dụng những kịch bản đó. Bạn có thể làm như sau. Ví dụ ở đây tôi dùng kịch bản Hy Lạp

 

Mẹo #3: Tối ưu hóa website bằng cách chỉ tác động đến các đoạn chữ mình cần

Trong số trường hợp cụ thể. Bạn chỉ muốn fonts chữ của mình tác động đến một đoạn text nhất định. Trong những trường hợp thế này. Bạn chỉ cần thêm tiền tố *text *vào sau tên font chữ để chỉ định đoạn text nào sẽ bị ảnh hưởng. Điều này đã được chứng minh là làm giảm dung lượng tải fonts giúp website bạn chạy nhanh hơn. Đặc biệt với các fonts chữ đặc biệt hoặc công phu.

Xét ví dụ sau:

 

Thay vì phải tải font Relaway. Chúng ta chỉ cần tải một cụm từ “SitePoint”. Điều này làm giảm kích thước tập tin đến 90%.

Những tối ưu hóa có thể làm tăng tốc độ trang web của bạn đáng kể. Nhớ lưu ý là các giá trị text của bạn phải được mã hóa nhé.

Mẹo #4: Tận dụn Font Effects của Google Fonts

Trong một số trường hợp chắc hẳn bạn muốn tạo một hiệu ứng cho một đoạn text. Điều này có thể làm dễ dàng trong CSS rất nhanh chóng và linh hoạt. Nhưng tại sao không thử sử dụng Google Fonts nhỉ. Google Fonts cung cấp cho bạn một số hiệu ứng như bóng đổ, Neon và nhiều hơn nữa.

Để sử dụng hiệu ứng trong Google Fonts. Bạn cần dùng thẻ *effect=.  *Và trên mỗi đoạn text bạn dùng hiệu ứng bản phải sử dụng các class tương ứng (Tuân thủ theo Google Fonts API)

Đây là một ví dụ sử dụng hiệu ứng ánh sáng Neon. Bạn thêm vào trang web mình như sau:

 

Để sử dụng cho bất kỳ đoạn text nào bạn cần thêm class này vào nó font-effect-{effect-name}. Với effect-name là tên hiệu ứng bạn sử dụng. Ví dụ mình đang dùng hiệu ứng neon thì nó sẽ như sau: font-effect-neon.

Và đây là một ví dụ khác về hiệu ứng Glow:

Lưu ý: Không phải tất cả hiệu ứng đều hoạt động tốt trên các fonts chữ hiện có. Một số fonts chữ nổi tiếng sẽ được “ưu ái” hơn.

Đây là một ví dụ về hiệu ứng outline:

*Web-kit Effects: *Có một số hiệu ứng chỉ chạy trên Google Chorme và Safari. Người dùng sử dụng trình duyệt khác chỉ thấy dòng chữ bình thường mà không có hiệu ứng.

Như bạn thấy đấy Google Fonts thật tuyệt vời. Nhưng đừng quên lưu ý 4 tip này. Nó sẽ giúp bạn tăng tốc website và làm cho trang web của bạn trong thú vị hơn

Nếu muốn biết rõ hơn về các tinh năng của Google Fonts. Hãy đọc tại đây:

https://developers.google.com/fonts/docs/getting_started

Nếu bạn có bất kỳ câu hỏi nào. Hãy bình luận bên dưới nhé.

LEAVE A REPLY

Please enter your comment!
Please enter your name here