CSS Font Website - Ook-code

css font cho website

Phông chữ cho website là phông chữ được cài đặt phổ biến trên tất cả các trình duyệt web và tương thích với tất cả các thiết bị.

Tuy nhiên, không có phông chữ nào hoàn toàn đáp ứng 100% cho website. Luôn có khả năng một phông chữ không được tìm thấy hoặc không được cài đặt đúng cách.

Do đó, có một điều rất quan trọng là chúng ta luôn luôn cài đặt phông chữ dự phòng trong thuộc tính font-family. Nếu phông chữ đầu tiên không hoạt động, trình duyệt sẽ thử phông chữ tiếp theo và phông chữ tiếp theo nữa, v.v. Lưu ý là chúng ta luôn phải kết thúc danh sách font chữ bằng họ phông chữ chung.

Ví dụ: Chúng ta có ba loại phông chữ: Tahoma, Verdana và sans-serif. Phông chữ thứ hai và thứ ba là dự phòng, trong trường hợp trình duyệt không hỗ trợ phông chữ đầu tiên.

<style> p { font-family: Tahoma, Verdana, sans-serif; } </style>

Xem kết quả

Danh sách sau mô tả các phông chữ website tốt nhất cho HTML và CSS:

• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

Lưu ý: Trước khi bạn xuất bản trang web của mình, hãy luôn kiểm tra xem phông chữ của bạn xuất hiện như thế nào trên các trình duyệt và thiết bị khác nhau, đồng thời luôn sử dụng phông chữ dự phòng!

Arial (sans-serif)

Arial là phông chữ được sử dụng rộng rãi nhất cho cả các phương tiện truyền thông trực tuyến và in ấn. Arial cũng là phông chữ mặc định trong Google Tài liệu.

Arial là một trong những phông chữ web phổ biến nhất trên các trình duyệt và nó được cài đặt sẵn trên tất cả các hệ điều hành chính.

Ví dụ

<style> body { font-family: Arial, sans-serif; } </style>

Xem kết quả

Verdana (sans-serif)

Verdana là một phông chữ rất phổ biến. Verdana có thể dễ dàng đọc được ngay cả đối với kích thước phông chữ nhỏ.

Ví dụ

<style> body { font-family: Verdana, sans-serif; } </style>

Xem kết quả

Helvetica (sans-serif)

Phông chữ Helvetica được các nhà thiết kế yêu thích. Nó phù hợp với nhiều loại hình kinh doanh.

Ví dụ

<style> body { font-family: Helvetica, sans-serif; } </style>

Xem kết quả

Tahoma (sans-serif)

Phông chữ Tahoma có ít khoảng cách hơn giữa các ký tự.

Ví dụ

<style> body { font-family: Tahoma, sans-serif; } </style>

Xem kết quả

Trebuchet MS (sans-serif)

Trebuchet MS được thiết kế bởi Microsoft vào năm 1996. Chúng ta nên cẩn thận khi sử dụng phông chữ này, vì nó Không được hỗ trợ bởi các hệ điều hành di động.

Ví dụ

<style> body { font-family: "Trebuchet MS", sans-serif; } </style>

Xem kết quả

Times New Roman (serif)

Times New Roman là một trong những phông chữ dễ nhận biết nhất trên thế giới. Nó trông chuyên nghiệp và được sử dụng trên nhiều tờ báo và trang web "tin tức". Nó cũng là phông chữ chính cho các thiết bị và ứng dụng Windows.

Ví dụ

<style> body { font-family: "Times New Roman", serif; } </style>

Xem kết quả

Georgia (serif)

Georgia là một phông chữ serif thanh lịch. Nó rất dễ đọc ở các kích thước phông chữ khác nhau, vì vậy nó là một ứng cử viên sáng giá cho thiết kế đáp ứng trên thiết bị di động.

Ví dụ

<style> body { font-family: Georgia, serif; } </style>

Xem kết quả

Garamond (serif)

Garamond là một phông chữ cổ điển được sử dụng cho nhiều sách in. Nó thể hiện ánh nhìn vượt thời gian và khả năng đọc tốt.

Ví dụ

<style> body { font-family: Garamond, serif; } </style>

Xem kết quả

Courier New (monospace)

Courier New là phông chữ serif monospace được sử dụng rộng rãi nhất. Courier New thường được sử dụng với các màn hình mã hóa và nhiều nhà cung cấp dịch vụ email sử dụng nó làm phông chữ mặc định của họ. Courier New cũng là phông chữ tiêu chuẩn cho kịch bản phim.

Ví dụ

<style> body { font-family: "Courier New", monospace; } </style>

Xem kết quả

Brush Script MT (cursive)

Phông chữ Brush Script MT được thiết kế để bắt chước chữ viết tay. Nó thanh lịch và tinh vi, nhưng có thể khó đọc. Sử dụng nó một cách cẩn thận.

Ví dụ

<style> body { font-family: "Brush Script MT", cursive; } </style>

Xem kết quả