CSS
Android
webfont
フォント

【調べてみた】スマホで明朝体を使いたい。【つ Webフォント】

More than 1 year has passed since last update.

そういえば、PCサイトでしか明朝体使ったことないなーと思って、ざっくり調べてみた。

_人人人人人人人人人人人人_

> Android 4 世代には   <

> 明朝体搭載されてない! <

 ̄YYYYYYYYYYYY ̄

※「ゴシック体」と「丸ゴシック体」のみ搭載。

※タイトルや本文に明朝体を使っているいくつかのサイトで検証してみたところ、Android 5.0 からは明朝体も表示できました。

 

なぜ表示できたのか、どう対応するのかは、これから調べます。

(ちなみに、iOS は 5 から搭載。デフォルトが明朝体。)

 


→ 追記(2016.03.02.)

記事を書いてからちょっと時間が経ったので、調べなおしてみた。

_人人人人人人人人人人人人_

> Android 6 世代にも   <

> 明朝体搭載されてない! <

 ̄YYYYYYYYYYYY ̄

(´;ω;`)


■ Android 4.0 から搭載されているシステムフォント

・半角英数字「Roboto」 ←角ゴシック

・日本語、全角英数字「モトヤフォント」 ←丸ゴシック


 - モトヤマルベリ(モトヤLマルベリ3等幅)

 - モトヤシーダ(モトヤLシーダ3等幅)※機種による ←角ゴシック



・機種によっては違うフォントが「標準フォント」としてインストールされている場合もあります。(だいたいゴシック系)

明朝体が入っているごく一部の機種も、「システムフォントを明朝体」に設定しないと使えないようでした。(社内にある機種で検証。※その場合はゴシック体は表示されず、全部明朝体になります。)


■ Android 6.0 (Marshmallow) からは…

・「Noto Sans CJK」 ←角ゴシック

「モトヤフォント」から、Adobe と Google が共同開発した「Noto Sans CJK」に変更されました。フォントの丸さがなくなったので、随分印象が変わるかも。


■ 結論

Android で明朝体を使いたかったら「Webフォント」

[参照]

・日本語webフォントが表示できない場合の解決方法。なんとか明朝体webフォントを設置編 | デザインのブログ〜フォントや素材制作

http://www.flopdesign.com/blog/font/3812/

・【厳選】明朝体の日本語フリーフォント15書体まとめ【商用OK】 - フォント無料ダウンロード|Typing Art

http://typingart.net/?p=179


→ 追記(2016.11.08.)

「Google Fonts + 日本語 早期アクセス」で明朝体も使えるようになりました。

https://googlefonts.github.io/japanese/

テストページを複数の実機で検証してみましたが、Android に搭載されているデフォルトフォントと明朝系フォントを混ぜて使うと違和感がすごい。

どうしても「Google Fonts +」で明朝体を使いたい場合は、多数の漢字にも対応している「さわらび明朝」一択。

(1)使いたいフォントを選ぶ。

[例]さわらび明朝

(2)HTML の head内に以下のような記述を追加する。

<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />

(3)CSSで設定する(「serif」は iOS、PC向けの保険)

.wf-sawarabimincho { font-family: "Sawarabi Mincho", serif; }

(完成!)


→ 追記(2017.06.19.)

...ものすごく...今更ですが...。

今年の4月にリリースされた「源ノ明朝」というシンプルな明朝体も使えるようになりました。

「さわらび明朝」はクセが強かったので、こちらなら断然使いやすい!

https://source.typekit.com/source-han-serif/jp/


■ Xperia だけの問題?

Android 6.0 以降は、標準搭載されているはずの「Noto Sans CJK JP」ですが、

Xperia だけは搭載されていないようです。

(安心して使えると思ってたのにー)(Xperia のシェア高いのにー!)

[参照]

・Xperia(Android 7)のフォントがウェブ制作者にとって残念 - Togetterまとめ

https://togetter.com/li/1106385