Phân loại phông chữ chung có sẵn để sử dụng trên trang web của bạn
Khi thiết kế một trang web, một trong những yếu tố chính của trang mà bạn sẽ làm việc là nội dung văn bản. Như vậy, khi bạn xây dựng một trang web và tạo kiểu cho nó bằng CSS, một phần lớn nỗ lực đó sẽ tập trung xung quanh kiểu chữ của trang web.
Thiết kế Typographic đóng một vai trò quan trọng trong thiết kế trang web. Nội dung văn bản được đặt ra và định dạng tốt giúp trang web thành công hơn bằng cách tạo trải nghiệm đọc thú vị và dễ sử dụng. Một phần nỗ lực của bạn khi làm việc với loại sẽ là chọn đúng phông chữ cho thiết kế của bạn và sau đó sử dụng CSS để thêm các phông chữ và kiểu phông chữ đó vào màn hình của trang. Điều này được thực hiện bằng cách sử dụng cái được gọi là " font-stack "
Font-Stacks
Khi bạn chỉ định phông chữ để sử dụng trên trang web, cách tốt nhất là cũng nên bao gồm các tùy chọn dự phòng trong trường hợp không thể tìm thấy lựa chọn phông chữ của bạn. Các tùy chọn dự phòng này được trình bày trong "ngăn xếp phông chữ". Nếu trình duyệt không thể tìm thấy phông chữ đầu tiên được liệt kê trong ngăn xếp, nó sẽ chuyển sang phông chữ tiếp theo. Nó tiếp tục quá trình này cho đến khi nó tìm thấy một phông chữ mà nó có thể sử dụng, hoặc nó chạy ra khỏi sự lựa chọn (trong trường hợp nó chỉ chọn bất kỳ font hệ thống nó muốn). Dưới đây là một ví dụ về cách một phông chữ chồng sẽ trông trong CSS khi được áp dụng cho phần tử "body":
body {font-family: Georgia, "Times New Roman", serif; }Lưu ý rằng chúng tôi chỉ định phông chữ Georgia trước tiên. Theo mặc định, đây là những gì trang sẽ sử dụng, nhưng nếu phông chữ đó không có sẵn vì lý do nào đó, trang sẽ dự phòng thành Times New Roman. Chúng tôi kèm theo tên phông chữ đó trong dấu ngoặc kép vì nó là một tên nhiều từ. Tên phông chữ đơn, như Georgia hoặc Arial, không yêu cầu dấu ngoặc kép, nhưng tên phông chữ nhiều từ cần chúng để trình duyệt biết rằng tất cả những từ đó tạo nên tên phông chữ.
Nếu bạn nhìn vào cuối phông chữ, bạn sẽ thấy rằng chúng ta kết thúc bằng từ "serif". Đó là tên họ phông chữ chung chung. Trong trường hợp không chắc chắn rằng một người không có Georgia hoặc Times New Roman trên máy tính của họ, trang web sẽ sử dụng bất kỳ phông chữ serif nó có thể tìm thấy. Điều này là thích hợp hơn để cho phép trang web dự phòng bất kỳ phông chữ nào mà nó muốn, vì bạn ít nhất có thể nói là loại phông chữ nào để sử dụng để giao diện tổng thể của thiết kế của trang sẽ càng nguyên vẹn càng tốt. Có, trình duyệt sẽ chọn phông chữ cho bạn, nhưng ít nhất bạn đang cung cấp hướng dẫn để biết loại font nào sẽ hoạt động tốt nhất trong thiết kế.
Họ phông chữ chung
Tên phông chữ chung có sẵn trong CSS là:
- chữ thảo
- tưởng tượng
- monospace
- serif
- sans serif
Mặc dù có nhiều phân loại phông chữ khác có sẵn trong thiết kế web và kiểu chữ, bao gồm slab-serif, blackletter, display, grunge và nhiều thứ khác, 5 tên font chung được liệt kê ở trên là những cái mà bạn sẽ sử dụng trong một phông chữ trong CSS. Sự khác biệt trong các phân loại phông chữ này là gì? Chúng ta hãy xem!
Các phông chữ chữ thảo thường có các ký tự chữ mỏng, trang trí công phu nhằm tái tạo văn bản viết tay lạ mắt. Những phông chữ này, vì các chữ cái hoa, mỏng của chúng, không thích hợp cho khối lớn nội dung như bản sao nội dung. Phông chữ chữ thảo thường được sử dụng cho tiêu đề và các nhu cầu văn bản ngắn hơn có thể được hiển thị với kích thước phông chữ lớn hơn.
Phông chữ ảo là các phông chữ hơi điên rồ không thực sự rơi vào bất kỳ danh mục nào khác. Các phông chữ nhân rộng các logo nổi tiếng, giống như các mẫu thư từ phim Harry Potter hoặc Back to the Future, sẽ rơi vào thể loại này. Một lần nữa, những phông chữ này không thích hợp cho nội dung cơ thể vì chúng thường được cách điệu để đọc những đoạn văn dài hơn được viết bằng những phông chữ này quá khó để làm.
Phông chữ Monospace là những phông chữ mà tất cả các dạng chữ đều có kích thước bằng nhau và cách nhau, giống như bạn đã tìm thấy trên một máy đánh chữ cũ. Không giống như các phông chữ khác có độ rộng thay đổi cho các chữ cái tùy thuộc vào kích thước của chúng (ví dụ, một chữ "W" sẽ chiếm nhiều không gian hơn chữ thường "i"), phông chữ monospace là chiều rộng cố định cho tất cả các ký tự. Các phông chữ này thường được sử dụng khi mã đang được hiển thị trên một trang vì chúng trông khác với các văn bản khác trên trang đó.
Phông chữ Serif là một trong những phân loại phổ biến hơn. Đây là những phông chữ có thêm các chữ ghép phụ trên các dạng chữ. Những mảnh thêm được gọi là "serifs". Các phông chữ serif phổ biến là Georgia và Times New Roman. Phông chữ Serif có thể được sử dụng cho văn bản lớn như tiêu đề cũng như đoạn văn bản dài và nội dung.
Sans-serif là phân loại cuối cùng chúng ta sẽ xem xét. Đây là những phông chữ không có những chữ ghép nói trên. Tên có nghĩa là "không có serif". Các phông chữ phổ biến trong danh mục này sẽ là Arial hoặc Helvetica. Tương tự như serifs, sans-serif phông chữ có thể được sử dụng tốt như nhau trong các nhóm cũng như nội dung cơ thể.
Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào ngày 16/10/17