OSが異なると導入されているフォントも違います。
何でそんな当たり前のことに立ち返ったかというと、昨日自分のAndroid端末（A1-810 / Android 4.4）でサイトチェックをしていたら、明朝体で表示してほしい（HTML）H3タグがゴシック体で表示されていたからです。
見出しはH1〜H4を使っていて、先日H3のみを明朝体にしました。
PCでしか確認しなかったので、確認漏れですね。
明朝体がゴシック体で表示されているとWebサイトの見た目がだいぶ違います。
そもそも、明朝体はゴシック体に比べ同サイズでも細く小さく見える視覚効果を期待してH3を明朝体にしたのに、台無しです．．．。
というわけで、せめてblogの見た目を「明朝体・ゴシック体」くらいに揃えよう、と思ったのが今回の記事の発端です。
目次
おさらい
以下の場合、デバイス（PCやスマホ）に存在するフォントでWeｂサイトが表示されます。
つまり、期待した見た目にはなりません。
- Webサイトで定義しているフォントがデバイスに存在しない
- Webサイトでフォントを指定していない
今日では、Web閲覧に多様なデバイスを使用できるので、主要なものでもかなりの数にのぼります。
- PC
- Windows
- Linux, BSD
- Mac OS X
- Smartphone, Tablet
- Android
- iOS
- Windows Mobile
環境ごとにフォント指定をしていたら大変ですね。
Webフォント（ウェブフォント）
CSS3の"@font- face"を使用すると、フォントファイルを読み込んで画面表示に利用することができます。
つまり、デバイスに存在しないフォントを使用して、Webサイトを表示することができるわけです。
有名どころだと"Google Fonts"があります。
外部サーバでURL公開されているので、CDN的な使い方ができて非常に便利です。
最初は、この中の"さわらび明朝"も候補に上げたのですが、見た目の問題で"花園フォント"をダウンロードしてサイト内に設置しました。
ちなみに、font-faseの説明は以下が分かりやすいです。
フォントの設定方法
上述の通り、「花園フォント（花園明朝）」を利用させていただきました。
今回は、Androidでの明朝体表示が目的のため、ttfファイルをそのまま利用しました。
（古いAndroidでも対応しているため）。
なお、Webフォントをきちんと設定する際は、以下が参考になります。
花園フォントについて
ライセンス
base on http://fonts.jp/hanazono/
このフォントはフリー（自由な）ソフトウエアです。
あらゆる改変の有無に関わらず、また商業的な利用であっても、自由に利用、複製、再配布することができますが、全て無保証とさせていただきます。Copyright 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2016, 2017 GlyphWiki Project.
構成
ダウンロードファイルを解凍すると、ttf（TrueTypeフォント）ファイルが2つあります。
- 花園明朝A（HanaMinA.ttf）
- 花園明朝B（HanaMinB.ttf）
フォント概要
花園明朝A
51,991字のJIS X 0213:2004収録の漢字等からなるフォントファイル（約21.7MB）
base on https://ja.wikipedia.org/wiki/JIS_X_0213
"JIS X 0213:2004"は日本語の日本工業規格（JIS）で、2000年に制定・2004年に改定されている。
JIS X 0213はJIS X 0208を包含し更に第三・第四水準漢字などを加えた上位集合である。
ちなみに、WindowsではVistaから標準搭載フォントが「JIS X 0208:1990」→「JIS X 0213:2004」に変更になりました。
これで騒がれた（Vista以降でないと正常に表示されない等）ので覚えています。
花園明朝B
60,317字のCJK統合漢字からなるフォントファイル（約29.3MB）
base on https://ja.wikipedia.org/wiki/CJK統合漢字
CJK統合漢字は、ISO/IEC 10646およびUnicode（）にて採用されている符号化用漢字集合およびその符号表である。
CJK統合漢字の名称は、中国語、日本語、朝鮮語で使われている漢字をひとまとめにしたことからきている。
今回は、blog用のフォントファイルなので"花園明朝A"を選択しました。
設定作業
フォントファイル設置
ttfファイルを任意の場所にアップロードします。
CSS設定例
フォントの定義例
以下、フォント名を"HanazonoMinA"として定義しました。
@font-face {
font-family: 'HanazonoMinA';
src: url("../fonts/HanaMinA.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
以下、複数指定例
srcに"local"指定をするとローカルにインストール済みであれば、それが使用されます（以下は"VL Pゴシック"の場合）。
指定はファイル名の拡張子なしを指定（"VL-PGothic-Regular.ttf" → "VL-PGothic-Regular"）。
@font-face {
font-family: 'HanazonoMinA';
src: local('VL-PGothic-Regular'),
url('../fonts/HanaMinA.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
適用例
body {
font-family:
/* Linux */
TakaoPMincho, 'IPA P明朝',
/* Windows */
'ＭＳ Ｐ明朝', ‘游明朝’, YuMincho,
/* MacOS X */
'ヒラギノ明朝 ProN', 'ヒラギノ明朝 Pro',
/* iOS */
'HiraMinProN-W3',
/* Android etc. */
'HanazonoMinA';
}
動作検証
前提条件
使用した機種
Android 4.4 にアップデートした Acerタブレット"A1-810"。
OK・NG判定基準
Webフォントとして指定した'HanazonoMinA'が反映されるか否か。
結果
OKブラウザ
以下のブラウザで正常に反映されることを確認しました。
- 標準ブラウザ
- Chrome
- Firefox
NGブラウザ
以下のブラウザでは反映されないことを確認しました。
（キャッシュクリアも実施しました）。
Firefox- iLunascape
- Opera
- Sleipnir
- Via
2017.11.12追記
"CSS設定例"に"複数指定例"を追加
2017.12.2追記
Firefoxは設定でWebフォントが有効になります。
設定方法：Android版FirefoxでもWebフォントは使用可能