Chuyện Font tiếng Nhật

Nếu sử dụng font có sẵn phía client

Mình xin chia sẻ vấn đề sử dụng font tiếng Nhật. Dự án mình đã từng làm sử dụng như sau:

html {
  font-family: メイリオ,meiryo,ヒラギノ角ゴ pro w3,hiragino kaku gothic pro,sans-serif;
}

// or

html {
  font-family: Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Roboto, sans-serif;
}

Nguồn tham khảo: stackoverflow/japanese-standard-web-fonts.

Thì xảy ra 1 số bug về độ dài và chiều cao của chữ khi dùng ở nhiều OS khác nhau. Cụ thể là Windows và macOS, bị lệch vài pixcel nên nó bị xuống dòng rồi chiều cao của dòng khác nhau... Nguyên nhân là do khi mình set font thế này thì browser sẽ tìm trong máy phía client (máy cá nhân của user) font name phù hợp nhất theo thứ tự mình sắp xếp. Ví dụ thứ tự ưu tiên là:

メイリオ
meiryo
ヒラギノ角ゴ pro w3
...

Hiểu rõ Font có sẵn phổ biến phía client

Về Hiragino:

Hiragino là một họ kiểu chữ được thiết kế bởi Jiyukobo Limited. và được Screen Graphics Solutions Co., Ltd. bán cho các chuyên gia từ năm 1993. Đây là một trong những phông chữ tích hợp sẵn trong macOS và iOS. Wikipedia/Hiragino

Như vậy Hiragino là của macOS.

Về Meiryo (メイリオ):

Meiryo là một kiểu chữ gothic sans-serif của Nhật Bản. Microsoft đã gói Meiryo với Office Mac 2008 như một phần của cài đặt tiêu chuẩn và nó thay thế MS Gothic làm phông chữ hệ thống mặc định trên các hệ thống Nhật Bản bắt đầu với Windows Vista. Wikipedia

Như vậy Hiragino là của Windows.

Xem 2 ảnh về 2 loại font này thì thấy rõ sự khác nhau. Nguồn tại amayadori.cloud/blog/japanese-font-family.

Giải pháp - sử dụng font chung

Tóm lại: nếu yêu cầu hỗ trợ nhiều OS thì nên tải font chung, free và open-source. Tuy nhiên chúng ta cũng phải chấp nhận chuyện phải download về máy client lần đầu tiên, vì những lần sau font đó sẽ được trình duyệt cached lại.

Font Roboto nó ko hỗ trợ tốt, hay nói cách khác là không có vector chuyên cho tiếng Nhật, ví dụ font Zen Kaku Gothic Antique thì mình vào web của nó sẽ thấy nó demo tiếng Nhật, nghĩa là nó chuyên cho tiếng Nhật.