Thay đổi font HTML: Hướng dẫn chi tiết

Quy tắc CSS font-family cho phép bạn định nghĩa font chữ của tài liệu web HTML. Để tham chiếu đến font bên ngoài, bạn có thể sử dụng phương thức url() để định nghĩa font-face. Hoặc, bạn có thể nhúng tệp CSS font từ các trang như Google Fonts.

Là các nhà phát triển, sẽ có lúc chúng ta không muốn sử dụng font mặc định được điền khi HTML được xử lý. Bài viết này nhằm chỉ cho bạn cách thay đổi font trong tài liệu HTML của mình bằng các phương pháp tốt nhất.

Cách thay đổi font trong HTML

Có ba cách để thay đổi font của trang web trong HTML:

• Sử dụng font tích hợp sẵn với quy tắc font-family.
• Sử dụng quy tắc font-face để tham chiếu font bên ngoài.
• Sử dụng bảng định kiểu CSS bên ngoài để định kiểu font 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 font này.

HTML Thay đổi Font: Font-family tích hợp sẵn

Cách đầu tiên chúng ta có thể thay đổi font là bằng cách sử dụng thuộc tính font-family trong định kiểu nội tuyến (inline styling). Điều này có thể được thực hiện như sau:

<p style="font-family:wingdings;" id="wingdings">New York</p>

Chúng ta chỉ cần sử dụng thuộc tính font-family để chỉ ra font nào chúng ta muốn sử dụng cho khối văn bản. Nhiều font chuẩn đều sẵn sàng để sử dụng.

Đây là ý tưởng tốt để có một font dự phòng, phòng trường hợp font lựa chọn đầu tiên không thể tải được. Việc này dễ dàng như thêm một dấu phẩy và tên font-family mới. Tôi luôn kết thúc bằng một nhóm chung (generic family) cho trường hợp cực đoan rằng hai font đầu tiên đều không khả dụng.

<p style="font-family: Roboto, Lato, sans-serif" id="roboto-plus-backups">New York</p>

Nhóm chung ở cuối chỉ là font sans-serif mặc định cho bất kỳ thiết bị nào mà khách hàng đang sử dụng. Các tên họ chung (generic family names) có sẵn cho chúng ta: monospace, serif, sans-serif, cursive và fantasy. Bạn cũng có thể truy cập một số font cụ thể như Times New Roman.

HTML Thay đổi Font: Sử dụng font-face

Bạn có thể sử dụng quy tắc font-face để nhập font từ nguồn bên ngoài vào trang web của mình.

Để sử dụng cách tiếp cận này, bạn phải có quyền truy cập vào tệp tài liệu font bên ngoài. Tài liệu font thường có phần mở rộng ".ttf".

Hãy xem cách thay đổi font bằng thuộc tính font-face. Đây là quy tắc kiểu CSS chúng ta cần sử dụng:

@font-face {
  font-family: "Open Sans";
  src: url(yoururl);
}

Chúng ta sử dụng thuộc tính kiểu font-face để khai báo font mới. Thuộc tính font-family định nghĩa tên font mới. src: url() hướng dẫn tài liệu CSS của chúng ta nơi tìm font. Giá trị của "yoururl" nên là URL của font văn bản của bạn.

Font của chúng ta sẽ chưa thay đổi trang web. Chúng ta phải nói với bảng định kiểu CSS phần tử nào nên sử dụng font mới:

h1, h2, h3 {
  font-family: "Open Sans";
}

Mã này nói với bảng định kiểu CSS áp dụng font "Open Sans" cho một số phần tử trên trang web. h1, h2, h3 là bộ chọn CSS áp dụng kiểu cho các phần tử được liệt kê. Các phần tử này là tiêu đề HTML.

Thay đổi Font HTML: Font CSS bên ngoài

<p id="sans-serif" style="font-family: Bangers, sans-serif">New York</p>
<p id="cursive" style="font-family: Yellowtail, cursive">New York</p>

<!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>