Quy trình từng bước đơn giản để thêm phông chữ vào trang web của bạn bằng phương pháp @ font-face. Ngoài ra, chúng tôi xem xét cách CMS và các nhà xây dựng trang web xử lý các phông chữ tùy chỉnh.

Bạn đang xem : cách thêm phông chữ vào trang web

Thêm một phông chữ duy nhất vào trang web của bạn là một cách tuyệt vời để làm cho thiết kế của bạn nổi bật trên mạng.

Trong bài viết này, tôi sẽ hướng dẫn bạn quy trình từng bước để thêm bất kỳ phông chữ nào vào trang web của bạn.

Lưu ý: vì không phải tất cả các trang web đều được xây dựng và được quản lý theo cùng một cách, tôi sẽ giới thiệu cách tiếp cận phổ biến nhất để thêm phông chữ tùy chỉnh và sau đó giải thích cách các nền tảng xây dựng trang web phổ biến nhất hỗ trợ phông chữ tùy chỉnh.

Nội dung:

Phông chữ nào có thể được sử dụng trên Web?

Về mặt kỹ thuật, bạn có thể thêm bất kỳ phông chữ nào vào bất kỳ trang web nào.

Tuy nhiên, khi tìm kiếm một phông chữ trực tuyến, bạn luôn muốn ghi nhớ t anh ta định giá, thỏa thuận cấp phép và phương pháp cài đặt.

Không cần phải lo lắng gì thêm, đây là một số thư viện phông chữ phổ biến nhất để giúp bạn tìm thấy điều đó hoàn hảo font:

Google phông chữ tự hào có một thư viện ấn tượng với gần 1000 phông chữ giấy phép libre có thể được duyệt qua thư mục web tương tác của chúng. Do API dành cho nhà phát triển , Phông chữ Google được cho là phông chữ dễ dàng nhất để thêm vào trang web của bạn và là nơi tôi khuyên bạn nên bắt đầu tìm kiếm của bạn.

Liên quan: 20 Phông chữ Google phổ biến nhất

Adobe Fonts, (trước đây là Typekit) cung cấp bộ sưu tập +14.000 phông chữ tuyệt đẹp. Dịch vụ mới và được cải tiến hiện cung cấp cho người đăng ký Creative Cloud quyền truy cập dễ dàng vào toàn bộ thư viện phông chữ của họ thông qua một nút bấm. Không giống như Typekit, Adobe Fonts đã loại bỏ giới hạn về số lần xem trang và làm cho tất cả các phông chữ của chúng có thể truy cập được cho cả máy tính để bàn và sử dụng web.

Ngoài việc cung cấp Bộ nhận dạng phông chữ Trình tạo phông chữ .

Webfont Generator cho phép bạn chuyển đổi bất kỳ phông chữ nào mà bạn có quyền sở hữu hợp pháp (định dạng tệp .ttf hoặc .otf) và chuyển đổi nó thành một Bộ công cụ WebFont có thể sử dụng bao gồm một Biểu định kiểu xếp tầng dễ sử dụng ( CSS).

Các Định dạng Phông chữ Khác nhau và Hỗ trợ Trình duyệt

Trong vài năm qua, các trình duyệt hiện đại đã cải thiện đáng kể cách chúng hỗ trợ các phông chữ tùy chỉnh. Tuy nhiên, ngay cả ngày nay, không phải tất cả các định dạng đều được hỗ trợ trên mọi trình duyệt.

Dưới đây là các trình duyệt phổ biến nhất và định dạng phông chữ chúng hiện hỗ trợ:

https (nguồn: )

Xem Thêm  Bảng HTML với Xuất, Sắp xếp, Lọc và Phân trang - sắp xếp bộ lọc bảng html

Tôi luôn khuyên bạn nên sử dụng TTF / OTF và WOFF để đảm bảo rằng phông chữ của bạn được hỗ trợ trên tất cả các trình duyệt.

Để biết thêm chi tiết về các định dạng phông chữ được hỗ trợ, hãy thử Tôi có thể sử dụng – Một công cụ tuyệt vời để nghiên cứu khả năng tương thích của tính năng trên các phiên bản trình duyệt khác nhau (MIỄN PHÍ). < / p>

Cách thêm phông chữ tùy chỉnh vào trang web của bạn bằng cách sử dụng @ font-face

Quy tắc @ font-face CSS được giải thích bên dưới là cách tiếp cận phổ biến nhất để thêm phông chữ tùy chỉnh phông chữ vào trang web.

Bước 1: Tải xuống phông chữ

Tìm phông chữ tùy chỉnh bạn muốn sử dụng trên trang web của mình, sau đó d ownload định dạng tệp TrueType Font (.ttf). Bạn cũng có thể tải xuống định dạng Phông chữ OpenType (.otf)

Bước 2: Tạo Bộ công cụ WebFont để duyệt chéo

Tải lên .ttf của bạn hoặc. tệp otf vào Webfont Generator và sau đó tải xuống Bộ phông chữ web của bạn.

Bước 3: Tải tệp phông chữ lên trang web của bạn

Sử dụng FTP hoặc trình quản lý tệp của bạn, tải tất cả các tệp phông chữ có trong Bộ Phông chữ Web lên trang web của bạn. * Thông thường, bộ này sẽ bao gồm nhiều phần mở rộng tệp như (.eot), (.woff), (.woff2), (.ttf) và (.svg).

Bộ tài liệu của bạn cũng sẽ bao gồm Biểu định kiểu xếp tầng (.css) mà bạn sẽ cần cập nhật và tải lên ở bước 4.

* Bước này sẽ thay đổi rất nhiều tùy thuộc vào cách trang web của bạn được tạo và lưu trữ.

Bước 4: Cập nhật và tải lên tệp CSS của bạn

Mở tệp CSS trong trình soạn thảo văn bản như Textedit, NotePad hoặc Sublime .

Thay thế URL nguồn hiện tại bằng URL mới mà bạn đã tạo bằng cách tải lên từng tệp.

Theo mặc định, vị trí URL nguồn được đặt trong Bộ Phông chữ Web đã tải xuống. Nó cần được thay thế bằng vị trí trên máy chủ của bạn.

Đây là một ví dụ nhanh:

Trước khi cập nhật:

@font -face {
font-family: “CustomFont”;
src: url (“CustomFont.eot”);
src: url (“CustomFont.woff”) định dạng (“woff”) , định dạng
url (“CustomFont.otf”) (“opentype”), định dạng
url (“CustomFont.svg # filename”) (“svg”);
}

Sau khi cập nhật:

@ font-face {
font-family: “CustomFont”;
src: url (“https://yoursite.com/css/fonts/CustomFont.eot”);
src: url (“https://yoursite.com/css/fonts/CustomFont.woff”) định dạng (” woff “), định dạng
url (” https://yoursite.com/css/fonts/CustomFont.otf “) (” opentype “),
url (” https://yoursite.com/ css / fonts / CustomFont.svg # filename “) định dạng (” svg “);
}

Sau khi cập nhật tệp CSS, bạn cần tải nó lên trang web (máy chủ) của mình .

Bước 5: Sử dụng phông chữ tùy chỉnh trong khai báo CSS của bạn

Giờ đây, tệp phông chữ và Biểu định kiểu xếp tầng của bạn đã được tải lên máy chủ của bạn, y Bạn có thể bắt đầu sử dụng phông chữ tùy chỉnh của bạn trong khai báo CSS để giúp cải thiện giao diện của HTML.

Điều này có thể được thực hiện theo nhiều cách, bao gồm cả việc thêm các khai báo trên toàn trang web vào tệp CSS chính của bạn.

Đây là một ví dụ nhanh:

h1 {
font-family: ‘CustomFont’, Arial, sans-serif;
font- weight: normal;
font-style: normal;
}

Cách thêm phông chữ trong các công cụ xây dựng trang web phổ biến

Hệ thống quản lý nội dung (WordPress, Drupal, Joomla, v.v.)

Có một số cách khác nhau để bạn có thể thêm phông chữ tùy chỉnh vào Hệ thống quản lý nội dung (CMS) như WordPress (WP ) :

Xem Thêm  Chỉ áp dụng lựa chọn phân biệt cho một cột - sql chọn các giá trị riêng biệt từ một cột

Thêm phông chữ tùy chỉnh bằng @ font-face CSS Thêm phông chữ bằng plugin WordPress Thêm phông chữ theo cách thủ công từ Phông chữ Google

Nói chung, quy trình 5 bước hiển thị ở trên sẽ là cách tiếp cận mặc định khi thêm phông chữ tùy chỉnh vào CMS. Mặc dù quá trình này có vẻ khá đơn giản đối với những người có kinh nghiệm về thao tác mã, nhưng người dùng mới làm quen thường sẽ tìm kiếm một giải pháp thay thế.

Nếu bạn đang sử dụng WP và không có bất kỳ kinh nghiệm nào về chỉnh sửa mã nguồn (tệp chủ đề) , rất có thể bạn sẽ muốn dựa vào plugin typography . Các plugin giúp bạn dễ dàng thêm các phông chữ tùy chỉnh mà không cần phải tự viết bất kỳ mã nào.

Điều duy nhất tôi lưu ý khi sử dụng các plugin WP là chúng có thể gây ra nhiều vấn đề trên trang web của bạn. Điều quan trọng là luôn nghiên cứu các plugin trước khi sử dụng chúng trên trang web của bạn.

Cuối cùng, vì Google Fonts cung cấp API dành cho nhà phát triển, bạn cũng có thể chọn “ thêm ” các phông chữ đó vào chủ đề bằng cách sử dụng tệp functions.php.

Trình tạo trang web (PageCloud, Squarespace, Wix, Weebly)

Có rất nhiều tùy chọn trình tạo trang web trực tuyến quản lý phông chữ tùy chỉnh theo những cách khác nhau.

Phông chữ của Google

Đối với hầu hết các phần, các nhà xây dựng trang web hàng đầu giúp bạn dễ dàng thêm phông chữ từ các trang web phổ biến như Phông chữ Google.

Ví dụ: với PageCloud, thêm một phông chữ từ Google không thể dễ dàng hơn. Tất cả những gì bạn cần làm là sao chép và dán phông chữ, và thì đấy, phông chữ của bạn đã được thêm vào trang của bạn và sẵn sàng được tạo kiểu theo bất kỳ cách nào!

Tuy nhiên, không phải tất cả các nhà xây dựng trang web đều dễ dàng thêm vào một Phông chữ của Google.

Ví dụ: thêm Phông chữ Google trong Weebly sẽ yêu cầu bạn chỉnh sửa mã nguồn (CSS) của trang web của mình. Họ giải thích quy trình 8 bước trong cơ sở kiến ​​thức của họ.

Dưới đây là danh sách ngắn các nhà xây dựng trang web hàng đầu và cách họ quản lý Google Fonts:

Như bạn có thể thấy, mỗi trình xây dựng trang web sử dụng một cách tiếp cận khác nhau để thêm phông chữ có thể từ rất dễ đến hơi phức tạp.

Phông chữ Tùy chỉnh < / h3>

Trong hầu hết các trường hợp, khi tìm cách thêm phông chữ tùy chỉnh không tồn tại trong Google Fonts, bạn sẽ cần chỉnh sửa CSS trên trang web của mình. Quá trình này có thể khác biệt đáng kể dựa trên trình tạo trang web mà bạn quyết định sử dụng.

Tôi khuyên bạn nên tìm kiếm thông qua các cơ sở kiến ​​thức và diễn đàn cộng đồng tương ứng của họ để biết thêm thông tin.

Ví dụ: các quy trình thêm phông chữ tùy chỉnh với Pagecloud rất giống với hướng dẫn từng bước được cung cấp ở trên.

Tóm tắt

Bất kể kinh nghiệm của bạn với CSS, việc làm theo hướng dẫn trong bài viết này sẽ cung cấp cho bạn khả năng thêm bất kỳ phông chữ nào vào bất kỳ nền tảng xây dựng trang web nào.

Tuy nhiên, khi bạn đã thêm thành công phông chữ bạn muốn vào trang web của mình, những câu hỏi bạn cần hỏi là:

Bạn có khả năng tùy chỉnh giao diện của phông chữ không? (trọng lượng phông chữ, màu sắc, độ cao dòng, khoảng cách giữa các chữ cái, độ mờ, v.v.) Bạn có thể tùy chỉnh bố cục trang web của mình để làm cho phông chữ nổi bật không (vị trí của văn bản, hình ảnh, video, v.v.)

Nếu bạn không có nhiều kinh nghiệm về CSS, những tùy chỉnh này có thể rất khó khăn khi sử dụng CMS hoặc trình tạo trang web dựa trên mẫu cứng nhắc như SquareSpace.

Đây là lý do tại sao tôi khuyên bạn nên sử dụng trình tạo trang web linh hoạt như Pagecloud , mang đến cho bạn sự linh hoạt vô song khi tìm cách tạo bố cục độc đáo với các tùy chọn phông chữ và kiểu dáng hầu như không giới hạn. Đăng ký ngay hôm nay để dùng thử trình tạo trang web và nền tảng thương mại điện tử của Pagecloud!

Vui lòng bật JavaScript để xem nhận xét do Disqus cung cấp.


Xem thêm những thông tin liên quan đến chủ đề cách thêm phông chữ vào trang web

CSS – 18 – Cách nhúng font chữ vào web và dùng font trực tuyến của Google font (Font)

alt

  • Tác giả: Phan Kim Tu
  • Ngày đăng: 2021-11-16
  • Đánh giá: 4 ⭐ ( 1994 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: https://www.phankimtu.com

Cách tải, cài đặt phông chữ tiếng Việt đẹp Google Fonts trên máy tính

  • Tác giả: www.thegioididong.com
  • Đánh giá: 3 ⭐ ( 9272 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách tải, cài đặt phông chữ tiếng Việt đẹp, độc đáo Google Fonts trên máy tính miễn phí. Hướng dẫn cụ thể, chi tiết. Click xem ngay!

Cách thêm phông chữ tùy chỉnh trong WordPress

  • Tác giả: tinhocvanphong.com.vn
  • Đánh giá: 5 ⭐ ( 9675 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngoài việc trông đẹp mắt, phông chữ tùy chỉnh còn có thể giúp bạn cải thiện khả năng đọc, tạo hình ảnh thương hiệu và tăng thời gian người dùng dành cho

Làm thế nào để thêm phông chữ vào trang web của bạn

  • Tác giả: atpweb.vn
  • Đánh giá: 3 ⭐ ( 4654 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thêm một phông chữ độc đáo vào trang web của bạn là một cách tuyệt vời để làm cho thiết kế của bạn nổi bật trực tuyến.

Cách thêm font chữ vào website

  • Tác giả: netweb.vn
  • Đánh giá: 3 ⭐ ( 1624 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cập nhập: 31/03/2021 – ở 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

Làm thế nào để thêm phông chữ vào trang web của bạn

  • Tác giả: nq.com.vn
  • Đánh giá: 4 ⭐ ( 5880 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

25 Phông chữ tuyệt đối an toàn trên web cho trang web của bạn

  • Tác giả: www.webhostingsecretrevealed.net
  • Đánh giá: 4 ⭐ ( 2111 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php