•
Sử Dụng Google Fonts
Trong bài học này chúng ta sẽ tìm hiểu cách sử dụng phông Google (hay Google fonts) cho trang web.
Chọn Phông
Google cung cấp cho chúng ta nhiều phông chữ khác nhau để sử dụng. Để chọn phông thì đầu tiên bạn hãy truy cập trang chủ của Google Fonts. Ở trang này bạn sẽ thấy danh sách các phông cung cấp bởi Google. Bạn cũng có thể sử dụng ô tìm kiếm ở góc trên ngoài cùng phía trái để tìm kiếm theo tên phông.
Nhấp vào liên kết của phông để xem thông tin chi tiết về phông và nếu như muốn chọn sử dụng phông bạn sẽ nhấn vào SELECT THIS FONT. Ở bài học này chúng ta sẽ chọn phông Roboto vì phông này hỗ trợ tất cả các ký tự trong tiếng Việt:
Sau khi chọn phông bạn cần tiếp tục click vào tab Family Selected nằm ở phía cuối màn hình để mở rộng tab này:
Trong cửa sổ mở rộng của tab bạn sẽ tìm thấy đoạn code HTML với thẻ <link> dùng để nhúng phông như hình phía dưới đây:
Thiết Lập Phông
Để thiết lập thêm các tuỳ chọn như kiểu chữ (in đậm, in nghiêng) và ngôn ngữ sẽ được hỗ trợ bởi phông thì bạn cần nhấp vào tab CUSTOMIZE nằm trong cùng cửa sổ chứa các phông đã chọn.
Tích chọn các kiểu chữ sẽ được hỗ trợ bởi phông như hình dưới đây:
Để thiết lập hỗ trợ tiếng Việt cho phông thì vẫn ở trong tab CUSTOMIZE, bạn kéo xuống phía dưới để thấy phần lựa chọn Languages:
Tích vào ô checkbox tương ứng để chọn ngôn ngữ Vietnamese.
Sử Dụng Phông
Sau khi thêm vào các thiết lập cho phông, bạn quay về tab con *EMBED và sao chép đoạn code chứa thẻ <link> đã được cập nhật lại để hỗ trợ hiển thị tiếng Việt.
<link href="https://fonts.googleapis.com/css?family=Roboto&subset=vietnamese" rel="stylesheet">Mở tập tin home.html và dán vào bên trong thẻ <head> ở vị trí ngay trước thẻ <link> dùng nhúng tập tin main.css như hình dưới đây:
...
<head>
...
<link href="https://fonts.googleapis.com/css?family=Roboto&subset=vietnamese" rel="stylesheet">
<link rel="stylesheet" href="stylesheets/main.css">
</head>
...Thực hiện thao tác trên với các tập tin contact.html và about.html.
Để sử dụng phông mới này bạn cần sao chép đoạn code trong tab EMBED nằm dưới mục Specify in CSS như trong hình phía dưới đây:
Quay trở lại tập tin main.css dán vào bên trong đoạn code áp dụng cho phần tử body:
body {
font-family: 'Roboto', sans-serif;
}Cuối cùng tải lại các trang web trên trình duyệt để xem hiển thị của trang với phông chữ mới.
Chẳng biết bản thân đang mong đợi điều gì
Mình đã thực hiện thành công. Thanks bạn!