Xin chào các bạn, hôm nay Thịnh chia sẻ với các bạn vấn đề về việc sử dụng font-face dành cho tiếng Việt trên các website. Hiện nay khi chúng ta sử dụng font-face để làm lên website các bạn sẽ đi kiếm tìm những font-face cho hợp lý, nhưng khổ lỗi tiếng Việt của chúng ta rất ít font-face. Nếu bạn tìm được thì càng tốt nhưng nếu không được mà khách hàng đòi hỏi cũng khó. Chính vì thế ở bài này Thịnh sẽ giải thích rành rọt cho các bạn hiểu về vấn đề font-face với tiếng Việt.
Điều đầu tiên font-face là gì?
Font-face là font dùng để định dạng font chữ ở dạng font-family trên trình duyệt web, giúp cho những font chữ hiển thị theo kiểu font của chủ nhân website.
Khi nào sử dụng font-face?
Sử dụng font-face khi người chủ website yêu cầu và theo bản vẽ thiết kế trên photoshop.
Font-face sử dụng cho những ngôn ngữ gì?
Font-face sử dụng cho tất cả các ngôn ngữ từ tiếng Việt, Anh, Hàn, Nhật, Trung, Ả Rập, Thái, … tất tần tật các ngôn ngữ có chữ viết cho đến các biểu tượng icon web.
Ngoài những vấn đề đó giúp chúng ta có được một website thật đẹp thì các bạn cần lưu ý các vấn đề mấu chốt
- Font-face cho tiếng Việt không có nhiều. Chính vì điều này khi bạn sử dụng font khác không hỗ trợ tiếng Việt sẽ làm to nhỏ con chữ, không theo đúng font gốc. Ví dụ bạn sử dụng font-face hỗ trợ tiếng Anh nhưng ko có tiếng Việt. Lúc này khi sử dụng font đó cho tiếng Việt sẽ vỡ tùm lum vì thế không sử dụng được.
- Các bạn vẽ website trên các phần mềm thiết kế như Photoshop,.. cần lưu ý khi chọn font-face để người lập trình web làm fontend sẽ không gặp khó khăn trong việc đi tìm font.
- Có rất nhiều font của nước ngoài đã được Việt hóa để sử dụng cho tiếng Việt nhưng nó chỉ sử dụng được trên photoshop chứ không thể sử dụng được trong font-face.
- Khi bạn sử dụng font Việt hóa chuyển đổi sang font-face sẽ không thành công và mình đã làm nhiều lần không được và cuối cùng phải tư vấn cho khách hàng mãi họ mới chịu hiểu.
- Khi thiết kế web bạn cần sử dụng kho font-face mà google cung cấp cho chúng ta tại địa chỉ: https://fonts.google.com/
- Một số font hỗ trợ tiếng Việt có thể chuyển đổi thành font-face thì bạn cần chuyển bộ font đó cho người làm font-end để họ thực hiện ghép vào site.
Đó là những lưu ý về việc sử dụng font-face dành cho tiếng việt khi làm font-end. Bạn nào có thêm thông tin có thể bình luận để cùng chia sẻ với mọi người về vấn đề sử dụng font-face cho tiếng Việt.
Chúc các bạn thành công!
Không cần đâu bạn, bạn chỉ cần lên google chọn font mình cần & chỉnh lại cấu trúc:
WebFont.load({
google: {“families”:[“Montserrat:300,400,500,600,700″,”Roboto:300,400,500,600,700”]},
active: function() {
sessionStorage.fonts = true;
}
});
Chào anh. Anh có thể giúp em và độc giả câu hỏi. Ví dụ em nhúng link sau
Giờ em muốn tải về máy thì làm như nào ạ? Chẳng nhẽ tải về có OpenSans-Bold.ttf, OpenSans-BoldItalic.ttf, OpenSans-ExtraBold.ttf, OpenSans-ExtraBoldItalic.ttf, OpenSans-Italic.ttf, OpenSans-Light.ttf, OpenSans-LightItalic.ttf thì khi nhúng mỗi font vào web thì phải đặt một tên khác cấu trúc nhưn sau hay sao???
@font-face {
font-family: “OpenSans-Bold”;
src: url(“/fonts/OpenSans/OpenSans-Bold.ttf”) format(“ttf”),
}
@font-face {
font-family: “OpenSans-ExtraBold”;
src: url(“/fonts/OpenSans/OpenSans-ExtraBold.ttf”) format(“ttf”),
}
…
đúng rồi, nhưng bạn xài font đậm nhạt nghiêng hay gì đó theo ý của bạn thì bạn mới phải gọi nó trong file css, còn cái nào ko xài ko gọi để nó ko phải load khi không xài