0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

スマホでWebフォント(英語)&アイコンフォント

Last updated at Posted at 2016-08-29

たまたま時間が空いたので、改めて調べなおしてみた@自分用まとめ。

肝心の「日本語Webフォント」についてはまだ検証できてないのですが...
「英語とアイコンフォントなら全然問題なかったよー」という記事です。

■ 以前作成した某サイト内で使用したフォント

  • 日本語(明朝体):Hiragino Mincho ProN、ヒラギノ明朝 Pro W3、HG明朝b、serif  ※Mac&Windowsに標準搭載のフォントから選択
  • 英語(セリフ):Old Standard TT(googleFonts)
  • 英語(スクリプト):Great Vibes(googleFonts)
  • アイコンフォント:FontAwesome

※アクセス解析結果から、ほぼPCでのみ閲覧されているので、スマホはおまけ対応。

■ 検証したスマホ・タブレットとその結果

機種名/OS 日本語(明朝体) 英語(セリフ) 英語(スクリプト) アイコンフォント
iOS系 明朝体
Galaxy SC-02C(Android 2.3.4) 角ゴシック
Galaxy SC-04E(Android 4.2.2) 角ゴシック
DIGNO(Android 4.2.2) 角ゴシック
Nexus7(Android 4.4.2) 丸ゴシック
Xperia(Android 4.4.2) 丸ゴシック
AQUOS PHONE(Android 4.4.2) 丸ゴシック
Galaxy SC-04F(Android 5.0) 丸ゴシック
Nexus5(Android 5.1.1) 丸ゴシック

おまけ:Windows7 の IE9(IETester) も iOS系と同じ結果でした。

■ まとめ

  • 英語・記号の Webフォントは、少なくとも Android 2.3.4 以降で問題なく使用できる。(まだがんばって使ってる人がいるかもしれないので、表示されて安心。)
  • Android系スマホには、CSSで設定した**「serif」系のフォントが搭載されていない**ため、明朝体ではなく、角ゴシックまたは丸ゴシック(標準フォント)で表示される。
  • Android 5.1.x 以上は実機がないので検証できていません。

■ 課題

  • 「日本語(明朝体)のWebフォント」を使ってみる。
  • 日本語は英語と違い文字数が多く、そのままだととても重い。軽量化の方法は?
  • ゴシック系・明朝系で、どんなフォントを設定すればよいのか?
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?