Hướng dẫn CSS

TRANG CHỦ CSS Giới thiệu CSS Cú pháp CSS Bộ chọn CSS CSS Cách thực hiện Nhận xét CSS Màu CSS Nền CSS Đường viền CSS Lề CSS CSS Padding Chiều cao / Chiều rộng CSS Mô hình hộp CSS Đề cương CSS Văn bản CSS Phông chữ CSS Biểu tượng CSS Liên kết CSS Danh sách CSS Bảng CSS Hiển thị CSS Chiều rộng tối đa CSS Vị trí CSS CSS Z-index CSS Overflow CSS Float Khối nội tuyến CSS Căn chỉnh CSS Bộ kết hợp CSS Lớp giả CSS Phần tử giả CSS Độ mờ của CSS Thanh điều hướng CSS Trình đơn thả xuống CSS Thư viện hình ảnh CSS Hình ảnh CSS Sprites Bộ chọn CSS Attr Biểu mẫu CSS Bộ đếm CSS Bố cục trang web CSS Đơn vị CSS Đặc tính CSS CSS! Quan trọng Các hàm toán học CSS

CSS nâng cao

Góc làm tròn CSS Hình ảnh đường viền CSS Nền CSS Màu CSS Từ khóa màu CSS CSS Gradients Bóng CSS Hiệu ứng văn bản CSS Phông chữ Web CSS Chuyển đổi CSS 2D Chuyển đổi CSS 3D Chuyển đổi CSS Hoạt ảnh CSS Chú giải công cụ CSS Hình ảnh phong cách CSS Phản chiếu hình ảnh CSS CSS object-fit Vị trí đối tượng CSS Mặt nạ CSS Các nút CSS Phân trang CSS CSS Nhiều cột Giao diện người dùng CSS Biến CSS Kích thước hộp CSS Truy vấn phương tiện CSS Ví dụ về CSS MQ CSS Flexbox

CSS đáp ứng

Giới thiệu về RWD RWD Viewport Chế độ xem lưới RWD Truy vấn phương tiện RWD Hình ảnh RWD RWD Video Khung RWD Mẫu RWD

Lưới CSS

Grid Intro Vùng chứa lưới Mục lưới

CSS SASS

Hướng dẫn SASS

Ví dụ về CSS

Mẫu CSS Ví dụ về CSS câu đố css Bài tập CSS Chứng chỉ CSS

Tham chiếu CSS

Tham chiếu CSS Bộ chọn CSS Chức năng CSS Tham chiếu CSS Aural Phông chữ An toàn trên Web CSS Hoạt hình CSS Đơn vị CSS Công cụ chuyển đổi CSS PX-EM Màu CSS Giá trị màu CSS Giá trị mặc định của CSS Hỗ trợ trình duyệt CSS

Phông chữ An toàn trên Web CSS


Phông chữ An toàn trên Web là gì?

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


Phông chữ dự phòng

Tuy nhiên, không có phông chữ hoàn toàn an toàn cho web 100%. 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 đó, điều rất quan trọng là luôn sử dụng phông chữ dự phòng.

Điều này có nghĩa là bạn nên thêm danh sách các "phông chữ dự phòng" tương tự trong thuộc font-family tính. 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, v.v. Luôn kết thúc danh sách bằng họ phông chữ chung.

Thí dụ

Ở đây, có ba loại phông chữ: Tahoma, Verdana và sans-serif. Phông chữ thứ hai và thứ ba là bản sao lưu, trong trường hợp không tìm thấy phông chữ đầu tiên.

p {
font-family: Tahoma, Verdana, sans-serif;
}

Phông chữ An toàn Web Tốt nhất cho HTML và CSS

Danh sách sau đây là các phông chữ an toàn trên web 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)
  • Chuyển phát nhanh mới (monospace)
  • Brush Script MT (chữ thảo)

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ả 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 an toàn nhất và nó có sẵn trên tất cả các hệ điều hành chính.

Thí dụ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


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ỏ.

Thí dụ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


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.

Thí dụ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Tahoma (sans serif)

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

Thí dụ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Trebuchet MS (sans-serif)

Trebuchet MS được thiết kế bởi Microsoft vào năm 1996. Hãy sử dụng phông chữ này một cách cẩn thận. Không được hỗ trợ bởi tất cả các hệ điều hành di động.

Thí dụ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


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.

Thí dụ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


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.

Thí dụ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Garamond (serif)

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

Thí dụ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Chuyển phát nhanh mới (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.

Thí dụ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Brush Script MT (chữ thảo)

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.

Thí dụ

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Mẹo: Ngoài ra, hãy xem tất cả các Phông chữ có sẵn của Google và cách sử dụng chúng.