このブログは普段スマホで書いているので気付かなかったのですが、PCで見るとブログの中国語文字部分の表示が汚い。前回の記事の中国語文字は下図のように表示されました。
画像では分かりにくいですが、「一本」の文字と「书读、线」では文字の大きさや上下の位置が揃っておらず、デコボコに見えます。原因と解決方法を調べてみました。
中国語文字が綺麗に表示されない理由
ブラウザのデベロッパーツールで先程の文字列のフォントを調べてみました。
Rendered Fonts Arial Unicode MS 4plyphs, Meiryo 4plyphs
8文字のうち4文字がMeiryoフォントでレンダリング(描写)されています。残りの4文字はArial Unicode MSフォントです。
要するに日本語に存在する文字「一、本、懂、k」はWidows7標準の日本語用フォントMeiryoでレンダリングされ、残り文字はMeiryoで表現できないのでArial Unicode MSフォントになります。この2つのフォント間で大きさが揃っていないので、綺麗に見えていません。
解決方法１（中国語部分にfont-familyを指定）
解決方法としてまず考えられるのは中国語文字列を表示する箇所にfont-familyを指定し、強制的に中国語フォントで文字を表示させます。下記のような形です。
<span style="font-family: 'SimHei'">一本书读懂k线图</span>
<span style="font-family: 'SimSun'">一本书读懂k线图</span>
<span style="font-family: 'Microsoft YaHei'">一本书读懂k线图</span>
<span style="font-family: 'Hiragino Sans GB'">一本书读懂k线图</span>
こうすることで、中国語文字部分が1つのフォントで統一され綺麗に見えます。
解決方法２（サイト全体のフォントで日本語と中国語を揃える）
上記の方法では中国語部分にHTMLタグを挿入する必要があります。はてなブログのスマホツールではHTML編集が出来ないので、対応不能です。そのためサイト全体のfont-familyを修正して日本語と中国語で同じ大きさ、位置になる似た構造のフォントを指定して解決します。
今使用している「はてなブログ Minimalismテーマ」のフォントは下記です。
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif
（Windowsの日本語OSに標準でインストールされている中国語簡体字フォント）
一番表示が近い「SimHei」をフォント指定に追加します。MacOS用にはHiraginoフォントの中国語簡体字版「Hiragino Sans GB」を追加します。
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans GB', '游ゴシック Medium', meiryo, 'SimHei', sans-serif"
変更前（上図）と変更後（下図）を比べると少しだけ良くなりました。
