Quy tắc font-family CSS cho phép bạn xác định phông chữ của tài liệu web HTML. Để tham chiếu đến các phông chữ bên ngoài, bạn có thể sử dụng phương thức url () để xác định một mặt phông chữ. Hoặc, bạn có thể nhúng tệp CSS phông chữ từ một trang web như Google Fonts.
Với tư cách là nhà phát triển, sẽ có lúc chúng tôi không muốn sử dụng phông chữ mặc định được điền khi HTML của chúng tôi được xử lý. Bài viết này nhằm mục đích chỉ cho bạn cách thay đổi phông chữ trong tài liệu HTML của bạn bằng cách sử dụng các phương pháp hay nhất.
Cách thay đổi phông chữ trong HTML
Có ba cách để thay đổi phông chữ của trang web trong HTML:
- Sử dụng phông chữ cài sẵn với quy tắc họ phông chữ.
- Sử dụng quy tắc phông chữ để tham chiếu đến một phông chữ bên ngoài.
- Sử dụng bảng định kiểu CSS bên ngoài để tạo kiểu cho các phông chữ trên trang web.
Trong bài viết này, chúng ta sẽ nói về từng phương pháp thay đổi phông chữ.
Phông chữ Thay đổi HTML:Họ Phông chữ Tích hợp sẵn
Cách đầu tiên chúng ta có thể thay đổi phông chữ của mình là sử dụng thuộc tính font-family trong kiểu nội tuyến của chúng ta. Điều này có thể được thực hiện như vậy:
<p style="font-family:wingdings;" id="wingdings">New York</p>
Chúng tôi chỉ sử dụng font-family thuộc tính cho biết chúng tôi muốn sử dụng phông chữ nào trong khối văn bản của mình. Nhiều phông chữ tiêu chuẩn có sẵn để sử dụng.
Bạn nên có một phông chữ dự phòng, đề phòng trường hợp không thể tải lựa chọn phông chữ đầu tiên. Việc thêm dấu phẩy và tên họ phông chữ mới cũng dễ dàng như vậy. Tôi luôn kết thúc bằng một nhóm chung cũng như trong trường hợp một cạnh mà hai trường hợp đầu tiên không có sẵn.
<p style="font-family: Roboto, Lato, sans-serif" id="roboto-plus-backups">New York</p>
Nhóm chung ở cuối chỉ là phông chữ sans-serif mặc định cho bất kỳ thiết bị nào khách hàng đang sử dụng. Họ chung chung có sẵn cho chúng tôi: monospace , serif , sans-serif , chữ thảo và tưởng tượng . Bạn cũng có thể truy cập một số phông chữ cụ thể như Times New Roman.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
HTML Thay đổi Phông chữ:Sử dụng một phông chữ
Bạn có thể sử dụng quy tắc phông chữ để nhập phông chữ từ nguồn bên ngoài vào trang web của mình.
Để sử dụng phương pháp này, bạn phải có quyền truy cập vào tài liệu phông chữ bên ngoài. Các tài liệu phông chữ thường có phần mở rộng là “.ttf”.
Hãy cùng xem cách thay đổi phông chữ bằng cách sử dụng thuộc tính font-face. Đây là quy tắc kiểu CSS mà chúng ta cần sử dụng:
@font-face {
font-family: "Open Sans";
src: url(yoururl);
} Chúng tôi sử dụng thuộc tính font-face style để khai báo phông chữ mới của chúng tôi. Thuộc tính font-family xác định tên của phông chữ mới của chúng tôi. src:url () hướng dẫn tài liệu CSS của chúng tôi về nơi tìm phông chữ của chúng tôi. Giá trị của “yoururl” phải là URL của phông chữ văn bản của bạn.
Phông chữ của chúng tôi sẽ không thay đổi trang web của chúng tôi. Chúng ta phải cho CSS style sheet của chúng ta biết những yếu tố nào nên sử dụng phông chữ mới của chúng ta:
h1, h2, h3 {
font-family: "Open Sans";
} Mã này yêu cầu bảng định kiểu CSS của chúng tôi áp dụng phông chữ “Open Sans” cho một số phần tử trên trang web của chúng tôi. h1, h2, h3 là một bộ chọn CSS áp dụng kiểu của chúng tôi cho các phần tử được liệt kê. Các phần tử này là các tiêu đề HTML.
Thay đổi phông chữ HTML:Phông chữ CSS bên ngoài
Một số trang web như Phông chữ Google cho phép bạn nhúng phông chữ vào trang web của mình bằng cách sử dụng biểu định kiểu CSS. Những kiểu này cho phép bạn xác định loại phông chữ bằng cách sử dụng các thuộc tính CSS. Trong trường hợp này, chúng tôi sẽ cố gắng sử dụng phông chữ ‘Bangers’ và ‘Yellowtail’ từ Google Fonts:
<p id="sans-serif" style="font-family: Bangers, sans-serif" >New York</p> <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>
Nếu bạn chạy mã ở trên trong IDE bạn chọn và tải nó, nó sẽ mặc định là phông chữ chung. Nếu bạn muốn sử dụng những phông chữ này, bạn có thể thực hiện với một vài cú nhấp chuột đơn giản:
- Truy cập Google Fonts.
- Dành thời gian để tìm hiểu trang web nếu bạn muốn. Có rất nhiều tùy chọn cho phông chữ ở đây. bạn có thể tùy chỉnh văn bản mẫu bằng bất cứ thứ gì bạn muốn. Có một đầu vào ở đầu trang web để bạn nhập những gì bạn muốn.
- Tìm kiếm 'Yellowtail' và nhấp vào nó. Bạn sẽ đến một màn hình với thông tin chi tiết về phông chữ. Tìm kiếm “ + Chọn kiểu này ”Và nhấp vào nút đó.
- Một ngăn kéo thanh bên sẽ xuất hiện với thông tin về lựa chọn của bạn. Nó sẽ luôn mở trong khi bạn duyệt qua các phông chữ khác. Nhấp vào Duyệt qua Phông chữ liên kết ở đầu màn hình và tìm kiếm 'Bangers'. Thực hiện quy trình tương tự như bạn đã làm cho ‘Yellowtail’.
- Trên thanh bên, bạn sẽ thấy tab "Nhúng". Nhấp vào nó.
- tùy chọn đã được đánh dấu. Sao chép và dán vào phần đầu của HTML của bạn.
- Thực hiện theo các nguyên tắc được đưa ra về cách sử dụng từng phông chữ trong CSS. Họ cũng cung cấp các phông chữ sao lưu được đề xuất.
- Thế là xong! Bạn đã sẵn sàng sử dụng các phông chữ này trong tài liệu của mình.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Yellowtail&display=swap" rel="stylesheet"> </head> <body> <p id="courier">New York</p> <p id="roboto">New York</p> <p id="raleway" style="font-family: Raleway, sans-serif">New York</p> <p id="serif" style="font-family: Courier New">New York</p> <p id="monospace" style="font-family: Roboto Monospace, monospace">New York</p> <p id="sans-serif" style="font-family: Bangers, Anton, sans-serif" >New York</p> <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p> <p id="roboto-condensed" style="font-family: Roboto Condensed, sans-serif">New York</p> </body> </html>
Bản demo hoạt động ở trên cho thấy cả phông chữ tích hợp sẵn và phông chữ bên thứ ba đang được sử dụng. Hãy thử nhập các phông chữ khác của bạn!
Kết luận
Bạn có thể thay đổi phông chữ HTML bằng cách sử dụng thuộc tính font-family hoặc bằng cách sử dụng bảng định kiểu CSS bên ngoài với phông chữ tùy chỉnh. Để nhúng phông chữ tùy chỉnh vào CSS của trang web, bạn có thể sử dụng quy tắc phông chữ.
Bạn có muốn tìm hiểu thêm về cách viết mã trong HTML? Đọc hướng dẫn Cách học HTML của chúng tôi. Trong hướng dẫn này, bạn sẽ tìm thấy các mẹo hàng đầu về cách học HTML cũng như hướng dẫn về các khóa học trực tuyến tốt nhất.