Webフォントについての説明です。
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コンバータ と TTEdit、OTEdit for Windows、OTEdit for Mac でWebフォントを作成できます。
WOFFコンバータは、TrueType、OpenTypeフォント全体を、WOFFとEOT形式のWebフォントに変換します。ファイル内の全文字をそまま変換するためファイルサイズは大きくなります。
TTEdit、OTEdit for Windows、OTEdit for Mac では特定の1文字のみだけのWebフォントを作成できます。[ファイル] メニューにあります[エクスポート] [1文字Webフォント]コマンドで可能です。
Copyright © 2015 Musashi System All Rights Reserved.