Google Web フォントの日本語向けのものを実際にホームページを作成して比較してみた。

Google Web Fonts 日本語の比較と設定

として、作成してみる。設定ですんなりとできなかったのですが、なんとかここまで作りました。

この頁のheadには

<link REL="stylesheet" href="/css/google-web-font.css" TYPE="TEXT/CSS">

として、webfontsの設定をし、そのcssには

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=M+PLUS+1p);
@import url(https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c);
@import url(https://fonts.googleapis.com/earlyaccess/hannari.css);
@import url(https://fonts.googleapis.com/earlyaccess/kokoro.css);
@import url(https://fonts.googleapis.com/css?family=Sawarabi+Mincho);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 400;
src: url(http://www.can-chan.com/fonts/NotoSerifCJKjp/NotoSerifCJKjp-Regular.woff) format('opentype');
}

.wf-mplus1p { font-family: "M PLUS 1p"; } /*font=M PLUS 1p*/
.wf-roundedmplus1c { font-family: "M PLUS Rounded 1c"; } /*font=M PLUS Rounded 1c */
.wf-hannari { font-family: "Hannari"; } /* font=はんなり明朝 */
.wf-kokoro { font-family: "Kokoro"; } /* font=こころ明朝 */
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; } /* font=さわらび明朝*/
.wf-sawarabigothic { font-family: "Sawarabi Gothic"; } /* font=さわらびゴシック*/
.wf-noto sans jp { font-family: "Noto Sans JP"; } /* font=Noto Sans JP （源ノ角ゴシック） */
.wf-notosansjapanese { font-family: "Noto Sans Japanese"; } /* font=Noto Sans Japanese （源ノ角ゴシック）*/
.wf-notoserifjapanese { font-family: "Noto Serif Japanese"; } /* font=ダウンロードした Noto Serif(源ノ明朝) */

と設定した。

比較的、私の注目している識別観点からすると「さわらび明朝」フォントが、ひらがな、カタカナ、漢字、英数文字など全体的に良かった。

Google Web Fontsが無料で使えるということで、日本語に対応するものがどのくらいあり、記号や複雑な文字、「’」や「”」の識別のしやすさなどを確かめてみる。

複雑な漢字もカバーできて、アルファベットも識別しやすいものとして、

１．Noto Serif SC

複雑な漢字は○。カタカナの「ニ」「ハ」「カ」と漢字の「二」「八」「力ちから」の識別○。「’」と「”」が連続すると☓。

２．Noto Serif JP

複雑な漢字は○。カタカナの「ニ」「ハ」「カ」と漢字の「二」「八」「力ちから」の識別○。「’」と「”」が連続すると☓。

３．Noto Sans SC

複雑な漢字は○。カタカナの「ニ」「ハ」「カ」と漢字の「二」「八」「力ちから」の識別○。「’」と「”」が連続すると△、微妙だが少し違って見える。

以上からすると、３の「Noto Sans SC」フォントが日本語、英数文字どちらにもよく対応できるようだ。

パソコンに入れているフォントで例文をワードで表示し、スクリーンショットを上に表示してみる。

915フォントの中で日本語対応しているものを中心にしている。斜線を入れたものは日本語対応ができていない。斜線を入れていなくても記号、漢字など表示できていないところを赤の四角で表示してみた。文字列は最初のワードで示したものと同じです。

フォントの枠を囲んだ2箇所はほぼこちらが望む形を整えている。

ここにも1つあった。

楕円の丸をつけているところは「’」「”」の違いがはっきりしている。

日本語や記号には少し難点もあるが、英数字に限れば良いものはある。

900以上のフォントの中から日本語の多くの漢字までカバーするものは以外に少ないことがわかった。

ホームページの作成を始めて18年になった。きょう、charset="UTF-8"の力を初めて知った。作り始めてからずっと"Shift-JIS"と設定してスクリプトをエディタで書き保存してきた。
保存しながら、Shift-JISでは保存できない文字があり、ひらがなにしたり、画像として表示したりして、なんとかやり過ごしてきた。
もちろん、パソコンを始めた頃は感じの文字数も少なく、仕方なしということもあったのだが、最近はパソコンで扱える文字数も増えてきた。ただフォントによる制約もまだまだあるのだが。
ハンカイソウという花の名前を
http://www.can-chan.com/hana/search/hana-index.html
で「樊噲草」と表示できずに「樊かい草」と書いていた。
また、念佛寺のページ
http://www.can-chan.com/nenbutsuji.html
の中でも、「光明徧照」
「ぎょうにんべんの『へん』」の字が表示できずに、画像で表示していました。

漢字についてあれこれ使いにくいのを工夫しながらやっていたのが、
charset="UTF-8"
に設定し直すだけで、解決するなんて目から鱗が落ちたという感じだ。

今、Gmailでこの文章を書いているときには、「樊噲草」の3文字、「光明徧照」の4文字もきちんと表示できているが、ブログに掲載したときにはどうなっているのだろう？

ネットで調べてみると、Shift-JISでは9000文字、UTF-8だと世界標準で使用されているようです。これでPCでもスマートフォンでも表示は大丈夫のようです。ガラケーでは表示できないかもしれないということのようです。