Cách Thêm Font Chữ Vào Website

Tìm kiếm Cách thêm font chữ vào website 5 năm trước, Code theme wordpress, Hướng dẫn làm theme wordpess, Phát triển website, Thiết kế web wordpress, Thủ thuật web, Website, Wordpress, 11836 Lượt xem

ở bài viết này netweb sẽ hướng dẫn các bạn cách thêm font chữ vào website của bạn nhé! hihi

Nội dung

• Quy tắc CSS @ font-face
• Các định dạng phông chữ khác nhau
• Sử dụng văn bản in đậm
• Chèn thư mục theme wordpress
• sử dụng
• Thêm font chữ google

Quy tắc CSS @ font-face

Phông chữ web cho phép các nhà thiết kế web sử dụng phông chữ không được cài đặt trên máy tính của người dùng.

Khi bạn đã tìm thấy / mua được phông chữ bạn muốn sử dụng, chỉ cần đưa tệp phông chữ vào máy chủ web của bạn và nó sẽ được tự động tải xuống cho người dùng khi cần.

Phông chữ “của riêng bạn” được xác định trong @font-facequy tắc CSS

Các định dạng phông chữ khác nhau

Phông chữ TrueType (TTF)

TrueType là một tiêu chuẩn phông chữ được phát triển vào cuối những năm 1980, bởi Apple và Microsoft. TrueType là định dạng phông chữ phổ biến nhất cho cả hệ điều hành Mac OS và Microsoft Windows.

Phông chữ OpenType (OTF)

OpenType là một định dạng cho các phông chữ máy tính có thể mở rộng. Nó được xây dựng trên TrueType và là thương hiệu đã đăng ký của Microsoft. Phông chữ OpenType được sử dụng phổ biến ngày nay trên các nền tảng máy tính lớn.

Định dạng Phông chữ Mở trên Web (WOFF)

WOFF là một định dạng phông chữ để sử dụng trong các trang web. Nó được phát triển vào năm 2009 và hiện là một Khuyến nghị của W3C. WOFF về cơ bản là OpenType hoặc TrueType với tính năng nén và siêu dữ liệu bổ sung. Mục tiêu là hỗ trợ phân phối phông chữ từ máy chủ đến máy khách qua mạng có hạn chế về băng thông.

Định dạng Phông chữ Mở trên Web (WOFF 2.0)

Phông chữ TrueType / OpenType cung cấp khả năng nén tốt hơn WOFF 1.0.

Phông chữ / Hình dạng SVG

Phông chữ SVG cho phép SVG được sử dụng làm glyph khi hiển thị văn bản. Đặc tả SVG 1.1 xác định mô-đun phông chữ cho phép tạo phông chữ trong tài liệu SVG. Bạn cũng có thể áp dụng CSS cho tài liệu SVG và quy tắc @ font-face có thể được áp dụng cho văn bản trong tài liệu SVG.

Phông chữ OpenType được nhúng (EOT)

Phông chữ EOT là một dạng phông chữ OpenType nhỏ gọn được Microsoft thiết kế để sử dụng làm phông chữ nhúng trên các trang web.

Để sử dụng phông chữ cho một phần tử HTML, hãy tham khảo tên của phông chữ (myFirstFont) thông qua thuộc tính font-family:

@font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family: myFirstFont; }

Sử dụng văn bản in đậm

Bạn phải thêm một @font-face quy tắc khác có chứa bộ mô tả cho văn bản in đậm:

@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight: bold; }

Chèn thư mục theme wordpress

@font-face { font-family: HelveBold; src: url(./fonts/UTMHelveBold.ttf); }

sử dụng

.title_main span, .title_main h2 { font-family: HelveBold; }

Thêm font chữ google

Google hỗ trợ rất nhiều font chữ tiếng việt các bạn vào link chọn lựa font rồi sau đó add vào trên thẻ </head> của website là ok nhé

Link lấy font google

Bài viết mới cập nhập

• 

  DANH SÁCH 34 TỈNH/THÀNH PHỐ CỦA VIỆT NAM SAU SÁT NHẬP 1/7/2025

  5 tháng trước, 53747 Lượt xem

  Năm 2025, Việt Nam dự kiến sẽ có 34 tỉnh, thành phố sau khi sắp xếp lại 63 tỉnh, thành hiện nay. Trong đó, có 6…

• 

  Cấu hình Newsletter gửi theo thời gian chỉ định

  8 tháng trước, 86 Lượt xem

  GIẢI PHÁP HOÀN HẢO: Chỉ vô hiệu hóa tất cả job, nhưng không chặn file wp-cron.php Cách làm: Bạn thêm đoạn sau vào functions.php hoặc…

• 

  21 câu lệnh Linux phải nhớ quản lý vps

  9 tháng trước, 456 Lượt xem

  Đây là những câu lệnh căn bản bất cứ ai muốn tìm hiểu về Linux cần phải nhớ. clear: làm sạch cửa sổ dòng lệnh…

• 

  Hướng dẫn quản lý web bán hàng 2 ngôn ngữ

  2 năm trước, 409 Lượt xem

  Xin chào các bạn! hôm nay netweb sẽ hướng dẫn các bạn quản lý web bán hàng 2 ngôn ngữ! Hướng dẫn tạo user thành…

• 

  Hướng dẫn tạo user thành viên và quản lý đơn hàng

  2 năm trước, 428 Lượt xem

  Trong bài viết này, netweb sẽ hướng dẫn các bạn tạo user thành viên và đặt hàng quản lý đơn hàng trong WooCommerce Thêm mới…

Bình luận trên facebook netweb.vn

Gọi netweb Báo giá web Chát Zalo Chủ đề liên quan theo Tag

• Cách kiểm tra một website nào đó đang sử dụng font chữ nào

font, font chữ