当サイトはアフィリエイト広告を利用しています。
スポンサーリンク

WordPressで中国語をちゃんと表示させる

WordPressで中国語を表示させるとフォントがごちゃまぜになってたので修正しました。


よっしーが運営しているAliグッズ放浪記というサイト、中国の通販サイトのAliExpressから購入した商品のレビューをメインにしているのですが、中国ということでちょくちょく中国語の表記をそのまま使っています。

しかしフォントが対応していないのか、ゴシック体と明朝体が混ざった表記によくなります。

例えば中国からの配送方法で、Cainiao Super Economy for Special Goodsというのがあり、これの中国語表記が菜鸟特货专线-超级经济。

スマホではちゃんと表示できるのですが、うちのWindows10のブラウザで見るとこんな感じで表示されます。

よっしー
よっしー

なんかむず痒い

というわけでググってみたところ中国語のWEBフォント – 思源宋体 | karakというサイトを発見。

中国語のWEBフォント – 思源宋体 | karak

こちらのサイトを参考にNoto Sans SCというWebフォントを導入。

ただうちの環境(Luxeritasテーマ)ではこのままではうまく表示されず、CSSのフォントファミリー指定に!importantを追記しました。

.cn {
font-family: 'Noto Sans SC',sans-serif!important;
}

これで無事、菜鸟特货专线-超级经济がちゃんと表示されるようになりました。

よっしー
よっしー

完璧


ちなみに、Windows10には標準で中国語のフォントが入っていて、ゴシック体はMicrosoft YaHei

明朝体はSimSunというフォント名になっています。

再び中国語フォントがごちゃまぜに戻りました (2024年1月23日追記)

ワードプレスのテーマをCOCOONに変更したらまた中国語フォントが適用されなくなってしまった…

よっしー
よっしー

また時間ある時に調べよう