Webフォントについて - M2O-Workshop/Training GitHub Wiki

１．Webフォントについて

サンプルアプリのjsug-shopではWebフォントを採用している。
2011年から策定が進められているCSS3で実装された新しい技術で、
Webアプリ内や内外のサーバーに配置されたフォントファイルにて
HTML上でのテキスト表示が可能となる。

結果として、Webアプリにおけるデザインの自由度が飛躍的に高まる。

従来のCSS2.1まではクライアント（Webページを見るPC）に
インストールされたフォントファイルのみが表示可能であったため、
自ずとOSプリセットフォントが前提となり大きな制約となっていた。

２．Webフォントのメリットデメリット

【メリット】
・フォント表示がクライアント環境に依存しにくい。
・Web上にフリーのフォントが多数公開されている。
・デザイン面で凝ったフォントが多く、表現の幅が広がる。

【デメリット】
・サーバーからフォントを取得するため、画面表示が重くなる。
・有料、もしくはフリーだが使用ライセンスに制約のあるフォントも多い。
・用意されている文字数（水準）も原則として少ない。

⇒ 視認性や機能性を考慮しつつ、場面や状況次第で使い分けることが重要。

３．Webフォントの使用方法

WebフォントはCSS3とセットで使用する。
まずは以下のようにcssに@font-faceを記述し
参照名（font-family）やフォントファイルの位置（src）等を定義する。

「@font-face」定義は1つのcssファイルに複数個を定義して良い。
また、srcはサーバーパスの他、WebのURLを指定することが可能。

@font-face {
  font-family: 'NotoSansCJKjp';
  src: url('../fonts/NotoSansCJKjp-Medium.otf');
}

続けて、定義したfont-faceを同じスタイルシート上で参照する。

p.test01 {
	font-family: 'NotoSansCJKjp',sans-serif;
}

最後に、HTMLファイル上のタグへ当該Objectをひもづける。

<p class="test01">フォントのサンプルです。</p>

４．補足

Webフォントの詳細については以下URLを参照のこと。
[CSSのWebフォント指定に関する考察 2016年版]http://www.6666666.jp/design/20160218/

⚠️ **GitHub.com Fallback** ⚠️