Tạo gói phông chữ web
Chọn phông chữ TTF, OTF, WOFF hoặc WOFF2 để tạo tệp WOFF2, CSS và bản xem trước HTML. Trước khi tích hợp vào trang web, hãy kiểm tra văn bản mẫu, tên CSS, độ đậm, kiểu và cách hiển thị trong khi tải; sau đó lưu gói thành ZIP. Không tạo tập ký tự con.
Bạn có thể làm gì
Đóng gói tệp cho web
Tạo WOFF2, CSS và bản xem trước HTML từ TTF, OTF, WOFF hoặc WOFF2. Có thể chọn nhiều phông chữ cùng lúc.
Kiểm tra ký tự và cài đặt CSS
Kiểm tra hình thức phông chữ sau khi chuyển đổi. Khi cần, bạn có thể đổi tên, độ đậm, kiểu dùng trên web và cách hiển thị trong lúc tải.
Chia sẻ bộ tệp dưới dạng ZIP
Lưu thư mục fonts, fonts.css và preview.html thành một bộ. Dùng chúng trong khi giữ nguyên vị trí tương đối.
Cách sử dụng
Chọn phông chữ cùng lúc
Chọn các phông chữ có thể dùng trên web. Nếu dùng nhiều phông chữ, hãy chọn chúng cùng lúc.
Kiểm tra hình thức và cài đặt web
Nhập văn bản xem trước và kiểm tra từng phông chữ. Để điều chỉnh tên, độ đậm hoặc tùy chọn khác, hãy mở cài đặt CSS của phông chữ đó.
Tạo bộ tệp và lưu ZIP
Nhấn “Tạo gói phông chữ web” rồi lưu webfont-kit.zip đã tạo.
Giải nén và thêm vào trang web
Giải nén các tệp trong khi giữ nguyên vị trí của thư mục fonts, fonts.css và preview.html. Tải CSS trên trang sẽ dùng phông chữ và dùng tên phông được chỉ định.
Hữu ích khi
Chuẩn bị trang web để xuất bản
Đóng gói phông chữ thành định dạng web và CSS để chuẩn bị các tệp cần tích hợp.
Bàn giao bộ hoàn chỉnh cho nhóm triển khai
Đóng gói nhiều phông chữ, chẳng hạn kiểu thường và đậm, rồi bàn giao cùng HTML chứa văn bản để kiểm tra.
Cách phông chữ và CSS phối hợp
WOFF2 là định dạng phông chữ dành cho web
Chuẩn bị WOFF2 chứa các ký tự gốc. Không tạo tập ký tự con. Dung lượng tệp tùy theo phông chữ.
Đăng ký tên, độ đậm và kiểu trong CSS
Các cài đặt này xác định kiểu được yêu cầu nào sẽ dùng phông chữ này trên web. Chúng không biến đổi hình dạng ký tự thành chữ đậm hoặc nghiêng.
Phân biệt cùng tên theo độ đậm và kiểu
Có thể dùng cùng tên cho kiểu thường và đậm, nhưng không được trùng tổ hợp tên, độ đậm và kiểu.
Chọn cách hiển thị trong khi tải
Theo mặc định, phông chữ dự phòng được hiển thị trước rồi chuyển sang phông đã chọn khi sẵn sàng. Nếu cần, bạn có thể đổi hành vi chờ và chuyển trong cài đặt CSS.
Giữ nguyên vị trí tệp tương đối
fonts.css tham chiếu các tệp như fonts/font-1.woff2. Nếu di chuyển thư mục hoặc CSS, hãy điều chỉnh đường dẫn tham chiếu cho phù hợp.
Câu hỏi thường gặp
Tôi nên đặt các tệp được tạo ở đâu?
Giải nén ZIP rồi đặt thư mục fonts, fonts.css và preview.html sao cho giữ nguyên vị trí tương đối của chúng. Tải fonts.css từ trang của bạn và dùng tên phông chữ được chỉ định trong CSS.
Công cụ này khác gì so với chỉ chuyển đổi định dạng?
Màn hình này đóng gói WOFF2 cùng CSS và bản xem trước HTML. Nếu chỉ muốn đổi định dạng phông chữ, hãy dùng “Trình chuyển đổi định dạng phông chữ”.
Tôi có thể chỉ giữ lại các ký tự mình dùng không?
Màn hình này không tạo tập ký tự con. Công cụ chuẩn bị phông chữ giữ nguyên các ký tự gốc.
Đổi độ đậm có làm ký tự đậm hơn không?
Cài đặt chỉ định giá trị độ đậm được dùng trong CSS. Cài đặt không chỉnh sửa hình dạng ký tự trong tệp phông chữ. Để dùng chữ đậm hoặc nghiêng, hãy cung cấp tệp chứa các hình dạng ký tự đó.
Tôi có thể dùng nhiều tệp cùng tên phông chữ không?
Bạn có thể đăng ký các tệp có độ đậm hoặc kiểu khác nhau. Nếu trùng tổ hợp tên, độ đậm và kiểu, hãy xem lại cài đặt tương ứng.
Điều gì xảy ra khi tôi chọn lại phông chữ?
Bộ phông chữ hiện tại và ZIP đã tạo sẽ bị xóa, sau đó bộ mới được chọn sẽ được nạp. Hãy chọn cả các tệp muốn tiếp tục dùng cùng bộ mới.
Nếu không phải mọi ký tự mẫu đều được hiển thị thì sao?
Ký tự không có trong phông chữ có thể được hiển thị bằng phông chữ khác. Hãy kiểm tra các ký tự được hỗ trợ và hình thức của chúng tại nơi sẽ dùng phông chữ.
Nếu không tải được phông chữ thì sao?
Hãy chọn lại phông chữ ở định dạng được hỗ trợ. Nếu có tệp nào trong bộ không thể chuyển đổi hoặc tải, bộ chỉ thành công một phần sẽ không được lưu.
Đầu vào và kết quả
- Đầu vào
- TTF, OTF, WOFF và WOFF2. Có thể chọn nhiều tệp cùng lúc.
- Điều kiện
- Kiểm tra điều khoản sử dụng của phông chữ đầu vào, bao gồm cả việc nhúng vào web.
- Cài đặt
- Tên, độ đậm, kiểu và cách hiển thị trong khi tải được dùng trong CSS.
- Đầu ra
- webfont-kit.zip. Bao gồm WOFF2, fonts.css và preview.html.