Tạo kiểu cho văn bản trên trang web là một phần quan trọng của thiết kế web. Ví dụ:bạn có thể muốn tiêu đề xuất hiện trong một phông chữ cụ thể hoặc tất cả văn bản trên một trang để sử dụng serif nét chữ.
Đó là nơi xuất hiện thuộc tính CSS font-family. Thuộc tính CSS font-family cho phép bạn chỉ định một hoặc nhiều họ phông chữ sẽ được sử dụng để tạo kiểu cho văn bản trên trang web.
Hướng dẫn này sẽ thảo luận, có tham chiếu đến các ví dụ, khái niệm cơ bản về thuộc tính CSS font-family và cách bạn có thể sử dụng thuộc tính này để tạo kiểu cho văn bản trên trang web.
Họ Phông chữ CSS
Có nhiều khía cạnh liên quan đến việc tạo kiểu cho một phông chữ trong CSS, từ thiết lập màu sắc đến kích thước của phông chữ. Tuy nhiên, một trong những phần quan trọng nhất của việc tạo kiểu cho một phông chữ là đặt họ phông chữ — kiểu được sử dụng bởi văn bản trên một trang web.
Để đặt họ phông chữ được sử dụng bởi văn bản trên một trang web, bạn có thể sử dụng thuộc tính font-family. Cú pháp cho thuộc tính font-family như sau:
font-family: fontFamilyOne, fontFamilyTwo, …;
Thuộc tính font-family chấp nhận một phông chữ duy nhất hoặc một danh sách các phông chữ. Nếu bạn chỉ định nhiều phông chữ, bạn nên phân tách từng phông chữ bằng dấu phẩy.
Thứ tự xuất hiện các phông chữ là thứ tự mà trình duyệt sẽ cố gắng áp dụng các phông chữ. Trình duyệt sẽ mặc định sử dụng phông chữ đầu tiên trong danh sách được cài đặt hoặc có thể tải xuống bằng trình duyệt web. Nếu phông chữ đó không có sẵn, phông chữ thứ hai sẽ được sử dụng, v.v.
Điều quan trọng cần lưu ý là thuộc tính font-family sẽ chọn một phông chữ cho mỗi ký tự trong một khối văn bản. Vì vậy, nếu một ký tự cụ thể không có sẵn trong một phông chữ, thì phông chữ tiếp theo trong danh sách họ phông chữ của bạn sẽ được thử cho đến khi tìm được phông chữ phù hợp.
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ọ.
Khi bạn đang sử dụng thuộc tính font-weight, tốt nhất là bạn nên bao gồm ít nhất một họ phông chữ chung (chẳng hạn như serif, sans-serif hoặc monospace). Điều này đảm bảo rằng nếu một phông chữ khác trong danh sách của bạn không có sẵn, trình duyệt vẫn có thể chọn một phông chữ cho văn bản trên trang web xuất hiện.
Có hai cách mà bạn có thể sử dụng thuộc tính font-family. Đầu tiên, bạn có thể sử dụng thuộc tính để chỉ định phông chữ tùy chỉnh cho một trang web. Thứ hai, bạn có thể sử dụng thuộc tính để áp dụng họ phông chữ chung cho văn bản trên trang web. Các họ phông chữ chung có sẵn để sử dụng với thuộc tính font-family như sau:
- serif:Các ký tự sử dụng kiểu chữ serif (ví dụ:Lucida Bright, Palladio).
- sans-serif:Các ký tự sử dụng kiểu chữ sans-serif (ví dụ:Open Sans, Trebuchet MS).
- monospace:Tất cả các ký tự đều có cùng chiều rộng (ví dụ:monospace, Menlo).
- chữ thảo:Các ký tự có một nét nối (ví dụ:Thư pháp Lucida).
- tưởng tượng:Phông chữ trang trí được sử dụng để thu hút sự chú ý vào các ký tự (tức là Giấy cói).
Có sẵn các họ phông chữ chung khác, bạn có thể đọc thêm chi tiết trong tài liệu về họ phông chữ CSS của Mozilla.
Bây giờ chúng ta đã biết những điều cơ bản về thuộc tính font-family, chúng ta có thể xem qua một vài ví dụ về cách nó hoạt động trong thực tế.
Ví dụ về họ phông chữ CSS
Chúng tôi đã được một câu lạc bộ tem địa phương, The Seattle Stamp Club, yêu cầu tùy chỉnh phông chữ của một số phần nhất định trên trang web của họ.
Đầu tiên, chúng tôi đã được yêu cầu thay đổi phông chữ của tất cả các tiêu đề
trên trang “Liên hệ” của họ để sử dụng phông chữ “Open Sans”. Vì vậy, ví dụ:tiêu đề "Liên hệ với chúng tôi" trên trang "Liên hệ" trên trang web của họ sẽ xuất hiện trong Open Sans. Nếu không có phông chữ đó, nên sử dụng họ “sans-serif” chung. Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này: <html>
<h1>Contact Us</h1>
<style>
h1 {
font-family: "Open Sans", sans-serif;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong mã HTML của chúng tôi, chúng tôi đã chỉ định một tiêu đề bằng thẻ
có chứa văn bản Contact Us . Sau đó, trong mã CSS của chúng tôi, chúng tôi đã sử dụng font-family để xác định phông chữ của các phần tử trên trang web của chúng tôi.
Giá trị mà chúng tôi đã gán cho thuộc tính font-family đặt phông chữ của tất cả các phần tử
thành Open Sans và nếu phông chữ đó không có sẵn, thì sans-serif chung gia đình được sử dụng. Để thực hiện điều này, chúng tôi đã chỉ định hai phông chữ, được phân tách bằng dấu phẩy.
Bây giờ, giả sử chúng tôi cũng muốn tạo kiểu cho tất cả các phần tử
trên Contact của câu lạc bộ tem trang sử dụng phông chữ Times. Nếu phông chữ đó không có sẵn, nên sử dụng phông chữ serif mặc định. Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:
<html>
<p>Are you interested in learning more about the Seattle Stamp Club? Contact us today!</p>
<style>
p {
font-family: "Times", serif;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong ví dụ của chúng tôi, chúng tôi đã khai báo một đoạn văn bản bằng thẻ
. Sau đó, chúng tôi đặt họ phông chữ của tất cả các thẻ
trong biểu định kiểu CSS của chúng tôi để sử dụng Times và serif phông chữ. Theo mặc định, trình duyệt sẽ cố gắng hiển thị tất cả các thẻ
trong Times nét chữ. Nếu phông chữ này không có sẵn, thì serif phông chữ được sử dụng.
Kết luận
Thuộc tính font-family CSS cho phép bạn chỉ định kiểu của văn bản trên trang web. Ví dụ:bạn có thể sử dụng thuộc tính font-family để sử dụng phông chữ "Arial" hoặc phông chữ chung "chữ thảo" cho tất cả văn bản trên trang web.
Hướng dẫn này đã thảo luận, có tham chiếu đến các ví dụ, kiến thức cơ bản về thuộc tính font-family CSS và cách bạn có thể sử dụng nó để tạo kiểu cho văn bản trên trang web. Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng thuộc tính font-family như một nhà thiết kế web bậc thầy!