Trong khi hình ảnh nhận được nhiều tình yêu khi nó đến với các trang web, đó là chữ viết để thu hút các công cụ tìm kiếm và thực hiện nội dung của hầu hết các trang web. Như vậy, thiết kế typographic là một phần quan trọng trong thiết kế website. Với tầm quan trọng của văn bản của trang web, cần phải đảm bảo rằng văn bản có vẻ tốt và dễ đọc. Điều này được thực hiện với phong cách CSS (Cascading Style Sheets).
Theo tiêu chuẩn thiết kế web hiện đại, khi bạn muốn đọc giao diện nội dung văn bản của trang web, bạn sẽ làm như vậy bằng cách sử dụng CSS. Việc này tách biệt kiểu CSS đó khỏi cấu trúc HTML của một trang. Ví dụ: nếu bạn muốn đặt phông chữ của trang thành "Arial", bạn có thể làm như vậy bằng cách thêm quy tắc kiểu sau vào CSS của mình (lưu ý - điều này có thể được thực hiện trong một biểu định kiểu CSS bên ngoài hỗ trợ kiểu cho mỗi trang trên trang web):
body {font-family: Arial; }Phông chữ này được đặt cho "body", do đó, CSS cascade sẽ áp dụng kiểu cho tất cả các phần tử khác của trang. Điều này là do mọi phần tử HTML khác là phần tử con của phần tử "body", các kiểu CSS như họ phông chữ hoặc màu sắc sẽ xếp tầng từ phần tử cha sang phần tử con. Đây sẽ là trường hợp trừ khi một phong cách cụ thể hơn được thêm vào cho các yếu tố nhất định. Vấn đề duy nhất với CSS này là chỉ có một phông chữ được chỉ định. Nếu phông chữ đó không thể tìm thấy vì lý do nào đó, trình duyệt sẽ thay thế một phông chữ khác ở vị trí của nó. Điều này là xấu bởi vì bạn không kiểm soát được phông chữ nào được sử dụng - trình duyệt sẽ chọn cho bạn và bạn có thể không thích những gì nó quyết định sử dụng! Đó là nơi mà một phông chữ đến.
Chồng phông chữ là danh sách phông chữ trong khai báo phông chữ CSS của gia đình. Các phông chữ được liệt kê theo thứ tự ưu tiên mà bạn muốn chúng xuất hiện trên trang web trong trường hợp có vấn đề như phông chữ không tải. Chồng phông chữ cho phép nhà thiết kế kiểm soát giao diện phông chữ trên trang web ngay cả khi máy tính không có phông chữ ban đầu mà bạn đã gọi.
Vậy một phông chữ trông như thế nào? Đây là một ví dụ:
body {font-family: Georgia, "Times New Roman", serif; }Có một vài điều cần lưu ý ở đây.
Trước tiên, bạn sẽ thấy rằng chúng tôi đã tách các tên phông chữ khác nhau bằng dấu phẩy. giữa mỗi người Bạn có thể thêm bao nhiêu phông chữ tùy thích, miễn là chúng được phân tách bằng dấu phẩy. Trình duyệt sẽ cố tải phông chữ đầu tiên được chỉ định trước. Nếu điều đó không thành công, nó sẽ chạy xuống dòng thử từng font cho đến khi nó tìm thấy một font mà nó có thể sử dụng. Trong ví dụ này, chúng tôi đang sử dụng phông chữ an toàn trên web và có thể tìm thấy "Georgia" trên máy tính của người đang truy cập trang web (lưu ý - trình duyệt sẽ hiển thị trên máy tính của bạn cho các phông chữ được chỉ định trên trang, vì vậy trang web thực sự đang nói máy tính có phông chữ để tải từ hệ thống của bạn). Nếu vì một số lý do mà phông chữ không được tìm thấy, nó sẽ di chuyển xuống ngăn xếp và thử phông chữ tiếp theo được chỉ định.
Trong điều kiện của phông chữ tiếp theo, chú ý cách nó được viết trong ngăn xếp. Tên của "Times New Roman", được đặt trong dấu ngoặc kép. Điều này là do tên phông chữ có nhiều từ. Bất kỳ tên phông chữ nào có nhiều hơn một từ (Trebuchet MS, Courier New, v.v.) phải có tên trong dấu ngoặc kép để trình duyệt biết rằng tất cả các từ đó là một phần của một tên phông chữ.
Cuối cùng, chúng tôi kết thúc ngăn xếp phông chữ với "serif", một phân loại phông chữ chung chung. Trong trường hợp không chắc rằng không có phông chữ nào bạn đã đặt tên trong ngăn xếp của bạn có sẵn, trình duyệt sẽ thay vào đó chỉ tìm thấy một phông mà ít nhất rơi vào phân loại thích hợp mà bạn đã chọn. Ví dụ, nếu bạn đang sử dụng phông chữ sans-serif như Arial và Verdana, hơn là kết thúc một phông chữ với phân loại "sans-serif" ít nhất sẽ giữ phông chữ trong toàn bộ gia đình đó nếu có sự cố tải. Phải thừa nhận rằng, rất hiếm khi một trình duyệt không thể tìm thấy bất kỳ phông chữ nào được liệt kê trong ngăn xếp và phải sử dụng phân loại chung này, cách tốt nhất là bao gồm nó chỉ để an toàn gấp đôi.
Ngăn xếp phông chữ và Phông chữ trên web
Nhiều trang web ngày nay sử dụng phông chữ web được bao gồm trên trang web cùng với các tài nguyên khác (như hình ảnh của trang web, tệp Javascript, v.v.) hoặc được liên kết với vị trí phông chữ ngoại vi như Google Fonts hoặc Typekit. Mặc dù các phông chữ này sẽ tải vì bạn đang tự liên kết với các tệp, nhưng bạn vẫn muốn sử dụng chồng phông chữ để đảm bảo rằng bạn có một số quyền kiểm soát đối với bất kỳ vấn đề nào có thể phát sinh. Điều tương tự cũng xảy ra đối với các phông chữ "an toàn trên web" nên có trên máy tính của ai đó (lưu ý rằng các phông chữ mà chúng tôi đã sử dụng làm ví dụ trong bài viết này, bao gồm Arial, Verdana, Georgia và Times New Roman). trên máy tính của một người). Mặc dù khả năng phông chữ bị thiếu là rất thấp, chỉ định một phông chữ sẽ giúp chống đạn thiết kế typographic của trang web càng nhiều càng tốt.
Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào 8/9/17