Trong quá trình phát triển web, việc sử dụng đúng kiểu phông chữ sẽ mang lại giao diện hấp dẫn cho ứng dụng. Các kiểu phông chữ này cung cấp manh mối trực quan về thứ tự đọc của tài liệu. Chẳng hạn, kiểu phông chữ của tiêu đề tài liệu phải đậm và có ý nghĩa so với những phông chữ khác. Kiểu dáng cũng giúp phân biệt nội dung quan trọng với những nội dung khác.
Kết quả học tập của bài viết này là:
- Google Web Fonts là gì?
- Làm cách nào để nhập Phông chữ Google trong HTML?
- Làm cách nào để sử dụng Google Fonts trong tệp CSS?
Google Web Fonts là gì?
Google web font là một thư viện mã nguồn mở chứa hàng trăm kiểu hoặc họ phông chữ. Nó cũng cung cấp các API giúp chúng tôi sử dụng phông chữ Web với Android và CSS. Google Fonts nhẹ hơn nhiều so với các thư viện phông chữ khác và được cung cấp miễn phí cho doanh nghiệp. Đây là dễ dàng hơn để thực hiện trên bất kỳ trang web.
Theo mặc định, CSS cung cấp các kiểu phông chữ fantasy, serif, Sans serif, cursive và monospace. Google Fonts có thể được sử dụng nếu bạn muốn sử dụng một số kiểu phông chữ khác.
Làm cách nào để nhập Phông chữ Google trong HTML?
Để sử dụng Google Fonts trên trang HTML, hãy làm theo các bước sau.
Bước 1: Chọn họ phông chữ
Đầu tiên, mở Phông chữ của Google trang web chính thức và chọn phông chữ bạn thích. Chẳng hạn, chúng tôi đã chọn “ tôm hùm hai ” họ phông chữ:
Bước 2: Chọn Kiểu
Tiếp theo, cuộn xuống để xem danh sách các kiểu. Thêm chúng vào bộ sưu tập của bạn bằng cách nhấp vào nút “ + ' bảng hiệu:
Bước 3: Xem các gia đình đã chọn
Để xem các họ đã chọn, hãy nhấp vào biểu tượng được đánh dấu bên dưới:
Bước 4: Sao chép liên kết để nhúng vào HTML
Sau đó, cuộn xuống và sao chép liên kết của họ phông chữ bằng cách sử dụng “ Sao chép ' biểu tượng:
Làm cách nào để sử dụng Google Fonts trong tệp CSS?
Để sử dụng bản sao Google Fonts trong CSS để tạo kiểu, hãy xem qua các ví dụ đã cho.
ví dụ 1
Bao gồm một ' ” phần tử để chỉ định một số nội dung hoặc đoạn văn:
< P > “Trang web hướng dẫn tốt nhất” P > Để nhập Google Fonts, hãy dán mã đã sao chép vào “
Yếu tố kiểu “p”
P {họ phông chữ: 'Tôm hùm hai' , chữ ẩu;
căn chỉnh văn bản: trung tâm;
cỡ chữ: 45px;
màu sắc: rgb ( 64 , 3 , 162 , 0,8 ) ;
}
Các thuộc tính CSS được giải thích sau đây được áp dụng cho HTML “ ' nhãn:
- “ họ phông chữ ” được gán với giá trị “ 'Tôm hùm hai', chữ thảo ”. Họ phông chữ này được nhập từ Google Fonts.
- “ căn chỉnh văn bản ” điều chỉnh căn chỉnh văn bản.
- “ cỡ chữ ” xác định kích thước phông chữ.
- “ màu ” đặt màu phông chữ.
Hình ảnh cho thấy họ phông chữ được áp dụng thành công:
ví dụ 2
Hãy lấy một ví dụ khác để nhập “ Nerko One ” Phông chữ Google. Với mục đích này, hãy dán lại mã cho URL phông chữ Google “Nerko One” vào “
Yếu tố kiểu “p”
P {họ phông chữ: 'Nerko Một' , chữ ẩu;
trọng lượng phông chữ: 300 ;
cỡ chữ: 30px;
}
Các ' họ phông chữ ”, “ trọng lượng phông chữ ', và ' cỡ chữ ” thuộc tính được áp dụng cho HTML “ ' yếu tố.
đầu ra
Chúng tôi đã hướng dẫn bạn cách nhập phông chữ web của Google trong tệp CSS.
Phần kết luận
Để nhập Google Fonts trong CSS, trước tiên hãy truy cập Phông chữ của Google trang web chính thức và chọn kiểu phông chữ. Sau đó, sao chép mã có chứa “ @nhập khẩu ” từ khóa và dán nó vào tệp CSS hoặc trong phần “