LoginSignup
7
5

font-familyのgeneric font familyがiOSやAndroidで日本語フォントに効かない

Last updated at Posted at 2016-03-08

こんなコンテンツ

<head>
  <style>
  .sansserif {
    font-family: sans-serif;
  }
  .serif {
    font-family: serif;
  }
  .cursive {
    font-family: cursive;
  }
  .fantasy {
    font-family: fantasy;
  }
  .monospace {
    font-family: monospace;
  }
  </style>
</head>
<body>
  <p><span class="sansserif">sans-serif<span/> <span class="sansserif">ゴシック体</span></p>
  <p><span class="serif">serif<span/> <span class="serif">明朝体</span></p>
  <p><span class="cursive">cursive<span/> <span class="cursive">筆記体</span></p>
  <p><span class="fantasy">fantasy<span/> <span class="fantasy">装飾体</span></p>
  <p><span class="monospace">monospace<span/>  <span class="monospace">等幅フォント</span></p>
</body>

で描画結果

font.png

左がPCのGoogle Chrome(version48) 右が iOS9.1(シミュレータ)のWebView

iOSのWebViewは日本語が等幅フォント以外はすべてゴシック体のフォントになってしまっている。
AndroidのWebView(Android5.0/Nexus9)も同様。

generic font familyが効かないと
明朝体(serif)で描画してほしいのに、ゴシック体などの意図しないフォントで描画されてしまう。。。

解決方法はないだろうか。

7
5
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
7
5