Webフォント

概要

Webサーバにフォントを格納して、パソコンにインストールしていないフォントでもホームページで表示できる機能がありますが、その時使われるフォントがWebフォントです。

この機能はCSS3で追加されました。

種類

Webフォントのフォーマットとしては、WOFF(Web Open Font Format)、EOT(Embedded OpenType)、SVG(Scalable Vector Graphics)、SVGZ(gzip圧縮されたSVG)、TrueType、OpenTypeなどがあります。

TrueType、OpenTypeはパソコンにインストールして使うフォントそのものです。

WOFFはTrueTypeまたはOpenTypeフォントをテーブル単位で圧縮して、独自のヘッダーを追加した形式です。圧縮されているためファイルサイズを小さくすることができます。これが今後の標準となりますが、新しい形式のため古いWebブラウザではサポートされていません。

EOTはInternet Explorer 4でサポートされたWebフォント形式です。圧縮されているためファイルサイズは小さいですが、Internet Explorerしか対応していません。なお、圧縮されてないEOTもあります。

SVGはWebでベクターデータ(ドロー形式のデータ)を扱うためのフォーマットで、それをフォントに応用したものです。テキストファイルのためメモ帳などのテキストエディタで内容を確認できます。Google Chromeなどの一部のWebブラウザでしか対応していません。

SVGZはSVGを単にgzip形式で圧縮したものです。SVGZフォントのファイル拡張子を.svgzから.gzに変更し、解凍ツールで展開するとSVGフォントと同じ内容になります。

使い方

まず、スタイルシートの定義中に、下記の様に指定します。

@font-face {
  font-family: "myFont";
  src: url("myFontFile.woff") format('woff');
}
.myFontClass {
  font-family: "myFont";
}

@font-faceは利用したいフォントを指定するための@規則です。

font-familyでWebフォントに名前を付けます。この名前は実際のWebフォントに設定した書体名とは関係なく自由に決めることができます。

srcでフォントデータの入っているURIとフォントのフォーマットを指定します。

上の例では@font-faceで定義したfont-familyを独自のクラス名myFontClassで指定しています。

下記の様にWebフォントを使いたいところでクラス名myFontClassを指定すればWebフォントを使って表示されます。

<body>
<p class="myFontClass">Webフォント文字</p>
</body>

Webフォントは1つののfont-familyに対して複数のフォーマットを指定できます。そのため、下記の様に指定すればある程度全てのWebブラウザでWebフォントを使うことができます。

@font-face {
  font-family: "myFont";
  src: url("myFontFile.eot?") format('eot'),
       url("myFontFile.woff") format('woff'),
       url("myFontFile.ttf")  format('truetype'),
       url("myFontFile.svgz") format('svg');
}

Webフォントの作成方法

当方で公開しているツールでは WOFFコンバータTTEditOTEdit for WindowsOTEdit for Mac でWebフォントを作成できます。

WOFFコンバータは、TrueType、OpenTypeフォント全体を、WOFFとEOT形式のWebフォントに変換します。ファイル内の全文字をそまま変換するためファイルサイズは大きくなります。

TTEditOTEdit for WindowsOTEdit for Mac では特定の1文字のみだけのWebフォントを作成できます。[ファイル] メニューにあります[エクスポート] [1文字Webフォント]コマンドで可能です。

はじめに | フォントのインストール方法 | フォントの削除方法 | フォントの種類 | 文字コード | B-スプライン曲線 | ベジェ曲線 | 縦書き専用文字 | 書体の著作権 | Webフォント

Copyright © 2015 Musashi System All Rights Reserved.