Google font đã phát triển nhanh chóng và được nhiều lập trình viên ứng dụng trong việc làm đẹp và sinh động thêm cho website của mình. Hiện tại google có khoảng 629 font families, đủ để bạn lựa chọn font phù hợp cho chính website của mình.
Tay phải: khu vực hiển thị chế độ xem trước cho các font chữ
Bên dưới màn hình: Là khu vực các font đã được chọn để làm việc
Sử dụng Google fonts
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.
Bước 2: 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.
Chọn màu chữ
Bước 3: Đặ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.
Chọn hỗ trợ tiếng Việt
Bây giờ chúng ta có 3 cách chèn vào website. Tuy nhiên, tôi vẫn khuyến khích các bạn dùng cách @im port hoặc Standard, vì đụng đến javascript thì bạn nào yếu sẽ khá phiền phức.
+ Nếu dùng @im port 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.
Dùng cách @im port hoặc Standard chèn vào website
Bước 4: 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.
Google fonts apply
Lưu ý: đoạn code do google đưa ra nhé.
Google Fonts hỗ trợ website
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í. Google font cũng đã phát triển một kho dữ liệu đồ sộ để phục vụ người dùng.
Cách sử dụng Google fonts cho Web
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ó 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.
Bước 1: 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
Cách sử dụng Google fonts cho Web
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ó 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.
Bước 1: 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àn 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.
Bước 2: 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.
Chọn màu chữ
Bước 3: Đặ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.
Chọn hỗ trợ tiếng Việt
Bây giờ chúng ta có 3 cách chèn vào website. Tuy nhiên, tôi vẫn khuyến khích các bạn dùng cách @im port hoặc Standard, vì đụng đến javascript thì bạn nào yếu sẽ khá phiền phức.
+ Nếu dùng @im port 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.
Dùng cách @im port hoặc Standard chèn vào website
Bước 4: 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.
Google fonts apply
Lưu ý: đoạn code do google đưa ra nhé.
1
2
3
4
5
6
7
8
9
10
| 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;} |
Đoạn code của google
Kết luận
Google 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. Vì vậy, bạn cần chọn lọc kỹ và lưu ý khi sử dụng các font này.
Google 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. Vì vậy, bạn cần chọn lọc kỹ và lưu ý khi sử dụng các font này.
0 comments:
Post a Comment