Webフォント

2017.04.11

Webフォントとは

 HTMLを表示するときフォントデータの場所をスタイルシートで指定する仕組やそのためのフォントをWebフォントという。フォントデータをインターネット上のフォントサーバーから取得して表示したり、EPUB3にフォントファイルを埋め込んだりするのに使う。

 

もっと詳しく!

 WebページやEPUBはHTMLで記述する。HTMLではテキストを文字コードで表すので、文字を画面に表示するには字形を描画するためのフォントデータが必要である。PC、スマホ、タブレットや電子書籍端末などの端末はそれぞれがフォントデータを保持している。HTMLやEPUBの制作者はCSSにフォント名を指定するが、指定されているフォント名に該当するフォントデータが端末にないときは、ブラウザなどで文字を表示する際に別のフォント名に置き換わってしまう。このため意図通りの表現にならないことがある。

 Webフォントを使えばこうした問題点を解決できる。CSSの@font-face規則を使って指定する。次に示す簡単な例[1]では、example.comにあるGentium.woffというフォントデータをフォント名Gentiumとして使う。

  • @font-face {
  •  font-family: Gentium;
  •  src: url(http://example.com/fonts/Gentium.woff);
  • }

 フォントの在処はsrcのパラメータ値で指定する。一般的には、パラメータ値はフォントサーバーにあるフォントデータのURLを指定する。フォントデータを有償で提供するWebフォントのサービスも増えている。EPUB3のフォント埋め込みでは、EPUB3ファイルにフォントファイルを含め、パラメータ値にそのフォントファイルのパスを指定する。さらに、EPUB3.1ではフォントデータをEPUBファイルの外部に配置しても良いこととなった。

 日本語フォントをWebフォントとして使うときは、実際に必要な文字だけのフォントデータを作成して使う。これをサブセット化という。Webフォントを提供する専用のサーバーはダイナミックなサブセット化機能を備えており、HTMLの任意の文字に指定したWebフォントを高速に提供できる。また、EPUB3にフォントを埋め込むときはフォントファイルをサブセット化すると、ファイルサイズを小さくでき、さらにフォントデータを別の目的に流用されにくくできる。

[1] https://www.w3.org/TR/css-fonts-3/ 4.1 The @font-face ruleの例8

[小林徳滋 アンテナハウス株式会社 20170206]