•
Created by user-q9xvifp 2 year(s) ago

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:

Chọn phông Goolge sẽ sử dụng

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:

Click mở rộng tab chứa các phông đã chọn

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:

Cửa sổ mở rộng chứa thông tin chi tiết các phông đã chọn

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 kiểu chữ hỗ trợ bởi phông

Để 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:

Thiết lập hỗ trợ tiếng Việt bởi phông

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&amp;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&amp;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:

Code CSS dùng sử dụng google phông trên trang web

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.

Thiết Kế Footer
Thiết Kế Trang FAQ

2 Bình Luận

Thu Vu Thu Vu •

Chẳng biết bản thân đang mong đợi điều gì

Hải Văn Hải Văn •

Mình đã thực hiện thành công. Thanks bạn!

Content must not be empty

Add Image

Upload image from computer or from URL.
Maximum 2Mb.

Related Tutorial

  • Tự Học Thiết Kế Website với HTML, CSS và JavaScript

  • Học CSS

    CSS là ngôn ngữ được dùng để mô tả hiển thị của trang HTML. CSS định nghĩa cách hiển thị của các phần tử trên trang web. Trong bài học này chúng ta sẽ học CSS...

  • CSS Cơ Bản

    Trong khi HTML được dùng để tạo ra siêu văn bản thì CSS được trình duyệt dùng để xác định xem siêu văn bản nên được hiển thị như thế nào. Tương tự như HTML, CSS...

  • JavaScript Cơ Bản

    JavaScript là ngôn ngữ kịch bản hướng đối tượng được sử dụng trong hầu hết các website trên thế giới hiện nay. Nó cho phép tương tác với các hành động của người...

  • HTML Cơ Bản

    HTML là ngôn ngữ cơ bản và phổ biến nhất và được dùng để tạo ra tất cả các website trên thế giới. Trong bài học này bạn sẽ được học cách viết mã lệnh HTML để tạ...

Danh Sách Bài Học