Sử dụng Phông chữ Google trong các Trang web của bạn

Google Fonts là một dịch vụ được cung cấp miễn phí bởi Google cho phép truy cập vào hàng nghìn phông chữ. Tất cả các phông chữ có sẵn đều theo giấy phép Nguồn mở, nghĩa là chúng được sử dụng miễn phí cho cả các dự án thương mại và phi thương mại.

Bắt đầu

Bài viết này sẽ giới thiệu cho các bạn về cách sử dụng Google Fonts trên một trang web. Dưới đây là giao diện của trang web soạn sẵn:

Ảnh chụp màn hình trang bảng định hướng

Và đây là đánh dấu HTML bản soạn sẵn:

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>My web page</title> </head> <body>   <h1>Welcome to my website</h1> </body> </html>

Khá nhàm chán, phải không? Hãy thêm gia vị cho nó một chút với phông chữ đẹp hơn.

Chọn phông chữ của bạn

Bây giờ là lúc ta chọn phông chữ của bạn . Truy cập font.google.com và chọn một phông chữ bạn thích bằng cách nhấn vào nút ( + ) (dấu cộng) nhỏ. Tôi sẽ sử dụng Karla . Khi bạn đã chọn ra phông chữ của bạn , hãy mở rộng ngăn kéo ở cuối trang.

Có hai cách để nhập phông chữ để sử dụng. Đối với phương pháp đầu tiên, hãy sao chép mã trong hộp mã dưới nhãn Standard . Bây giờ hãy quay lại phần đánh dấu của bạn và thêm mã đã sao chép và thẻ kiểu vào phần đầu của tài liệu như thế này.

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>My web page</title>    <link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet"> </head> <body>   <h1>Welcome to my website</h1> </body> </html>

Bạn sẽ nhận thấy từ ví dụ URL ở trên rằng Google Fonts hiện hỗ trợ thuộc tính font-display ! 🎉

Nếu bạn đã có một biểu định kiểu CSS riêng biệt, hãy sao chép mã dưới nhãn @import và thêm nó vào đầu biểu định kiểu của bạn như vậy.

@import url('https://fonts.googleapis.com/css?family=Karla&display=swap');  .element {   /* ... */ }

Sử dụng Phông chữ

Ta đã nhập các phông chữ của bạn , bây giờ đã đến lúc sử dụng chúng. Hãy đặt phần body của mã đánh dấu HTML để sử dụng Karla, như sau:

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>My web page</title>    <link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">    <style>       body {         font-family: 'Karla', sans-serif;       }   </style> </head> <body>   <h1>Welcome to my website</h1> </body> </html>

Bây giờ, nếu ta nhìn vào trang web của bạn , nó sẽ giống như sau:

Ảnh chụp màn hình với phông chữ tùy chỉnh của ta

Điều đó trông tốt hơn rất nhiều!

✨ Thật dễ dàng phải không? Như vậy, bạn có thể làm cho các trang web của bạn trông đẹp hơn với dịch vụ lưu trữ phông chữ miễn phí do Google Fonts cung cấp! Cảm ơn vì đã đọc!

Tags:

Các tin liên quan

Cách triển khai ứng dụng web Go bằng Nginx trên Ubuntu 18.04
2019-07-24
Biến Gatsby thành PWA: Service Worker và Web App Manifest
2019-07-18
Giới thiệu về Kiểm tra trực quan cho Ứng dụng Web
2019-06-11
Cách cài đặt ứng dụng web bằng Cloudron trên Ubuntu 18.04
2019-05-29
Cách triển khai ứng dụng web Go với Docker và Nginx trên Ubuntu 18.04
2019-04-23
Cách cạo các trang web và đăng nội dung lên Twitter bằng Python 3
2019-04-22
module Web tích hợp: Cách sử dụng KV Storage
2019-03-22
Cách thu thập thông tin một trang web với Scrapy và Python 3
2019-03-20
Cách cạo các trang web với Beautiful Soup và Python 3
2019-03-20
Cách sử dụng API Web trong Python 3
2019-03-20