フォントの埋め込み

[アーティクル]
03/19/2008


		前のトピック: MoveLightメソッド次のトピック: データバインド

フォントの埋め込み

ドキュメントを作成する場合、Webページのデザイナーはデスクトッププリンタでの印刷作業に悩まされる。デスクトッププリンタでは、どのフォントでドキュメントを印刷するかを、レイアウトごとに制御して選択する。一方、コンテントを表示する場合、Webオーサーはユーザーにサポートされているフォントやブラウザに従う。

数年前までフォントの埋め込みは、Microsoft WordやPowerPoint®のようなMicrosoft社のアプリケーションにおける機能であった。ユーザーは、オーサーが意図するフォント（ドキュメントの作成時のフォント）でページを見ることができる。Microsoft® Internet Explorer 4.0では、Webに埋め込まれたフォントをサポートしている。この技術により、Internet Explorer 4.0を使っているユーザーは、サイトのデザイナーが指定したフォントでそのページを見ることができる。

埋め込みフォントの技術

埋め込みフォントの例

Internet Explorer 4.0における制約

Internet Explorer 4.0におけるセキュリティ

Microsoft WEFTの利用

埋め込みフォントの技術

World Wide Webが登場した当初では、ページで使われているフォントはブラウザで制御されていた。その後、FONTエレメントとカスケーディングスタイルシート（CSS）のfont-familyプロパティにより、Webオーサーはユーザーのシステムにインストールされているフォントを制御したり、アクセスしたりできるようになった。しかし、指定するフォントがユーザーのコンピュータにインストールされていない場合は、デフォルトや2次指定したフォントの書体でドキュメントは表示されていた。しかし、Internet Explorer 4.0ではフォントの埋め込みをサポートしている。オーサーはユーザーのシステムに一時的にフォントをインストールできるので、Webページのコンテントをオーサーの意図した状態で表示できるのである。

フォントの埋め込みには工業標準がない。Microsoft TrueTypeフォントの埋め込み技術は、提案の1つでしかない。World Wide Web Consortium (W3C)では、最近に提出された仕様を試せるワーキングドラフトが用意されている。

Microsoft社のフォントの埋め込みはCSS記法を使い、Webドキュメントのフォントスタイルを示している。デザイナーは埋め込まれるフォントの回数を制限できるので、ユーザーのコンピュータにフォントがある場合はフォントを埋め込まなくてもすむ。次に例を示す。これは、デザイナーの指定したフォントが何らかの問題でユーザーのコンピュータにインストールされなかった場合に、2番目のフォントの書体が使われる例である。
<STYLE>
<SPAN style="COLOR: red">@font-face myfont { src:url(garamond.eot); }</SPAN>
P { font-family: "Garamond, <SPAN class=blue>myfont</SPAN>" }
</STYLE>
Internet Explorer 4.0に埋め込まれたフォントについては、Internet Explorer 4.0における制約で説明しているので参照すること。

フォントの埋め込みにおけるレベル

TrueTypeフォントには埋め込み許可がある。これは、埋め込まれるフォントの型にTrueTypeフォントを変換するツールを使ってコード化されている。埋め込みには、次に示す4つのレベルがある。

埋め込み不可能　利用可能なフォントではあまり見られない。これらのフォントは、そのフォントの作成者により、埋め込みができないように定義されている。フォントを所有している会社でフォントに埋め込み不可能を設定している場合でも、埋め込み可能なバージョンにアップグレードできる場合がある。使いたい埋め込み不可能のフォントを見つけた場合は、製造元に可能なアップグレードについて問い合わせること。

印刷とプレビュー　フォントは埋め込み可能だが、クライアント側で静的に残るページに対してだけである。クライアント側にその静的なページでフォントを変更して表示したコンテントがある場合は、"編集可能"または"インストール可能"なフォントが使われる。このようなページの例には、インラインJava™ベースのワードプロセッサーやe-mailエディタなどがある。

編集可能　フォントは、"印刷とプレビュー"フォントの制約を受けることなく、WEFT (Web Embedding Fonts Tool)のようなツールで埋め込むことができる。

インストール可能　フォントは、Internet Explorer ４.0で埋め込み可能なフォントとして処理される。このフォントは、ユーザーのフォントフォルダにはインストールされない。この主な理由は、ユーザーが色々なWebを参照している間には、何百ものフォントが存在し、それらすべてのフォントを必ずしも必要としていないからである。

埋め込みフォントの例

次に示す例は、Microsoft Typography のWebサイトにある。フォントを埋め込むことでどのように改良されたかを、Web上の一般に使われているフォントと比較してみる。

注　これらの例はMicrosoft Internet Explorer 4.0を使って参照すること。

例1：

Healthy eating recipe

設計過程　デザイナーがフォントの埋め込みを許可しないこともあるので、この例で使うフォントは最初にMicrosoft社のフォントプロパティの拡張機能を使って調べている。最初にフォントの埋め込み許可を調べておけば、後で使えなくなることをあらかじめ避けることができる。

このページ自体は、簡単なHTMLテーブルで設計されているカスケーディングスタイルシートの機能でフォントを指定し、テキストと記号の正確な位置を確保している。現段階では、使われるフォントはすべてローカルにインストールされている。

コピーとレイアウトが設定されると、Microsoft WEFT (Web Embedding Fonts Tool)を使い、ページにリンクされる"フォントオブジェクト"を作成する。WEFTツールではWebページにおけるフォントの取り扱いを分析し、使用するフォントから指定した文字を集め、圧縮したフォントオブジェクトを作成する。また、フォントオブジェクトにリンクするカスケーディングスタイルシートのコードをHTMLページに記述して、そのページを修正する。例1のページで［表示|ソース］を選択すると、追加したコードが参照できる。
@font-face {
font-family: Goudy Stout;
font-style:  normal;
font-weight: 700;
src: url(GOUDYST0.eot);
このコードでは、Goudy Stoutフォントが指定されているテキストのあるページで、GOUDYST0.eotフォントオブジェクトをInternet Explorer 4.0で常に使うことを指示している。このページで使われたフォント、使われた特別な文字の数、そのフォントオブジェクトの容量は次の表で示している。

使ったフォント 特殊キャラクタ オブジェクトサイズ

Pie 9 4.27K

Goudy Stout Bold 15 7.43K

Garamond Bold 15 10.3K

Garamond 19 10.3K

Script MT Bold 49 3.97K

このページを他のブラウザから参照した場合　埋め込みをサポートしないブラウザでは、そのページにフォントオブジェクトをリンクするコードは無視される。カスケーディングスタイルシートをサポートしているユーザーのブラウザでは、指定されたフォントがインストールされていれば、テキストを指定されたフォントで表示できる。Goudy StoutフォントとGaramondフォントはMicrosoft Office製品にあるので、おそらくこのフォントは表示できるはずである。最初に選択したフォントが利用できないと、ブラウザでは2番目、3番目に選択したフォント（インストールされている場合）でテキストを表示する。昔のブラウザでは、デフォルトのフォントですべてのテキストが表示される。

残念なことに、Internet Explorer 4.0以外のブラウザでは、記号のフォントが普通のフォントで表示されてしまう。CSSのブラウザでも、正しくその記号を表示できない。この方法で記号のフォントを表示できるのは、Internet Explorer 4.0の特有なコンテントだけに含まれる機能に限られる。

例2：

A blot on the copybook

設計過程　この例は4ページあり、1つのフォントオブジェクトを複数のページで使う方法について説明する。French Script MTフォントオブジェクトはすべての文字と物語の句読点に使われ、4ページすべてで参照される。

U物語のテキストに使われている文字と違い、画像が1度だけ表示される。このため、4つのフォントオブジェクトが作成され、画像だけを含む各フォントオブジェクトがそれを参照するページで使われる。

3番目のフォントはカスタムフォントで、この例で使うために特別に作成した。"A Blot on the Copybook"の句は、1つの文字としてMacromedia Fontographerを使い抜き出され、文字Qにマップされる。また、"fin"の句も同様に抜き出され、文字Kにマップされる。

使ったフォント 特殊キャラクタ オブジェクトサイズ

French Script MT 52 11.1K

Copyblot 2 4.23K

Dingblots (p. 1) 3 2.56K

Dingblots (p. 2) 27 8.42K

Dingblots (p. 3) 17 5.47K

Dingblots (p. 4) 13 3.57K

このページを他のブラウザから参照した場合 例1と同様に、この例では埋め込み記号のフォントを使用している。2つのページでも、"A Blot on the Copybook"と"fin"の句をそれぞれQとKにマップするカスタムフォントを使用している。この方法でカスタムフォントと記号のフォントを表示できるのは、Internet Explorer 4.0の特有なコンテントだけに含まれる機能に限られる。

例3：

Typographic ornament

設計過程　これらのページでは、HTMLを使って千鳥格子のパターンを作成している。これは、Border WebフォントとKingston Inlineフォントから取得した様々な記号で色付けされている。

使ったフォント 特殊キャラクタ オブジェクトサイズ

Kingston Inline 36 17.1K

Runic MT Condensed 33 9.85K

BorderWeb 10 8.36K

このページを他のブラウザから参照した場合 例2と同様に、これらのページにも埋め込みの記号のフォントが使われている。これは、Internet Explorer 4.0の仕様でしかない。

例4：

Progressive rendering

設計過程　Internet Explorer 4.0では、ページで参照されるフォントオブジェクトをダウンロードし、解凍し、一時的にインストールするまでは、そのページを表示できない。しかし、フォントオブジェクトに格納されたフォントを動的に置き換えて、インストールされたフォントでページを表示したい場合もある。

この例を実行するのに必要なコードは非常に小さい。次にフォームを示す。
<SCRIPT LANGUAGE="VBSCRIPT">
Sub Window_onLoad
Msgbox("Click here to continue the demo")
document.stylesheets(<SPAN class=red>i</SPAN>).href="ftembed.css"
End Sub
</SCRIPT>
stylesheets(<SPAN class=red>i</SPAN>)セクションは、置き換えたいスタイルシートのコレクションエレメントである。この例では、*stylesheets(0)*に対応するnullスタイルシートで、作成するスタイルシートのエレメントを必要な大きさにしている。これを処理するには、HTMLコードのHEADエレメントに次のコードを記述する。
<LINK rel=stylesheet href=null>
フォントオブジェクトのリンクには外部のスタイルシートが含まれるので、そのページ自体がダウンロードされた後に参照される。Msgboxコードを挿入しているので、レンダリング効果がどのくらい早くなっているかを確かめることができる。独自のページでこのコードを実行する場合は、この行を削除する。

使ったフォント 特殊キャラクタ オブジェクトサイズ

Braggadocio 18 3.16K

Curlz MT 36 10.4K

OCR A Extended 19 4.75K

Gradl 23 4.08K

Snap ITC 29 7.09K

Internet Explorer 4.0における制約

現在のMicrosoft Internet Explorer 4.0では、たとえユーザーのシステムに指定されたフォントがインストールされていても、フォントオブジェクトをダウンロードし、解凍し、インストールする。次のバージョンでは、リンクされたフォントオブジェクトをダウンロードする前に、指定されたフォントが利用できるかどうかをチェックできるようになる。現段階では、この処理をVBscript (Visual Basic® Scripting Edition)やJScriptを使ってチェックしなくてはならない。

W3Cのフォント埋め込みの提案でも、ブラウザで同じフォントの異なるサブセットを含むフォントオブジェクトを組み込めるように記述されている。前のセクションで示したように、特殊なフォントの大文字を含むフォントオブジェクトと、小文字を含む他のフォントオブジェクトはリンクできた。現在のInternet Explorer 4.0では、指定された最初のフォントオブジェクトだけを使用している。

Internet Explorer 4.0におけるセキュリティ

Internet Explorer 4.0のセキュリティの設定により、埋め込みフォントがあるページにアクセスするたびに警告を受ける。セキュリティレベルの設定は簡単に変更できる。しかし、この設定を変更する前に、Internet Explorerのオンラインヘルプにアクセスし、セキュリティについてのセクションを読むこと。

［表示|インターネットオプション］を選択し、［セキュリティ］タブをクリックする。

［カスタム］ラジオボタンを選択し、［設定］ボタンをクリックする。

「ダウンロード」のセクションまでスクロールする。

「フォントのダウンロード」で、「ダイアログを表示する」から「有効にする」に変更する。

Microsoft WEFTの利用

Microsoft Web Embedding Fonts Toolは、Internet Explorer 4.0のリリースと同時に発表された。WEFTは無料であり、サイトのデザイナーが自分のWebページにリンクできるフォントオブジェクトを作成するツールである。

Microsoft TypographyのWebサイトから、Windows® 95とWindows NT®用のWEFTの現行バージョンをダウンロードできる。

WEFTで作成したフォントオブジェクトは、今までのフォントフィルタで作成したフォントオブジェクトとは多くの点で異なる。フォントオブジェクトは圧縮され、一般的にはサブセットなので、特別なサイトやページで使うだけのフォントが含まれている。また、Internet Explorer 4.0だけにインストールできるので、他のアプリケーションからアクセスされることはなく、WEFTの機能が使えないサイトにリンクされることもない。将来的には、市場でよく使われるWeb構築ツールにWEFTの機能を内蔵する予定である。

WEFTスタイルコード

WEFTにより、1つ以上のフォントオブジェクトを使う各HTMLページのHEAD部分にSTYLEセクションを追加できる。
<STYLE TYPE="text/css">
@font-face {
font-family: Garamond;
font-style:  italic;
font-weight: normal;
src: url(Garamond1.eot); }
</STYLE>
このコードでは、ページにGaramond Italicフォントが指定されている場合、Internet Explorer 4.0でGaramond1.eotフォントオブジェクトを使うように設定している。FONT FACEタグで、リンクやインラインカスケーディングスタイルシートなどでフォントが指定されていても、このブラウザでは指定されたフォントオブジェクトを使用する。

カスケーディングスタイルシートファイル

WEFTではInternet Explorer 4.0を使って、各ページのフォントと文字を決定する。ページでリンクされたスタイルシートを参照する場合、このスタイルシートにより、Internet Explorer 4.0で表示するページのフォントが決定する。WEFTでは、リンクされたスタイルシートを変更できない。その代わり、フォントオブジェクトにリンクするコードを指定されたページにリンクする追加することで、HTMLページを修正できる。

1つ以上のリンクされたスタイルシート内でフォントオブジェクトを参照することが、より効率的となることもある。これを試すには、変更したページをWebサイトに更新するかを聞かれるオプションをスキップする。その代わり、変更したページ（デフォルトでは、My Documentsフォルダに保存されている）から関連するコードを切り取り、リンクしたスタイルシートに貼り付けること。

ここで注意が必要となる。スタイルシートがカスケードするように、リンクされたスタイルシートで指定されるフォントは、指定されたインラインで無視される場合がある。また、スタイルシートは複数のページからリンクされるので、適切なサブセットレベルを選択するときに注意しなくてはならない。

カスケーディングスタイルシートについては、SBN（Microsoft Site Builder network）Authoringの A User's Guide to Style Sheets を参照すること。

一般的な質問

Q.使用可能なフォントは?

何千種類ものTrueTypeフォントが利用でき、ほとんどのフォントはMicrosoft Web Embedding Fonts Toolで使うWebページに埋め込むことができる。しかし、WEFTでは"埋め込み不可能"に設定されるフォントと、重大なエラーを含むフォントを埋め込むことはできない。

Q.フォントの埋め込み許可を調べる方法は?

Microsoft Font Properties Extensionを使うと、あらゆるフォントの埋め込み許可を調べられる。また、WEFTにはフォントを調べる機能があり、システムにインストールしたフォントの許可を知らせることができる。

非常に古いTrueTypeフォントや、Macintosh®のTrueTypeに変換されたフォント（このフォントではどんな埋め込み許可でもコード化できない）を見つけるかもしれない。WEFTでは、これらのフォントを"埋め込み不可能"として処理する。このようなフォントがないと思われるイベントでは、フォントの製造元にアップグレードについて問い合わせること。

Q. ArialやTimes New Romanといった一般的なフォントまで埋め込む必要があるのか?

WEFTでは、すでにインストールされていそうな一般的なフォントを識別できる。Windowsの一般的なフォントにはArial、Times New Roman、Courier Newがある。これらのフォントを埋め込むこともできる。指定されたフォントがユーザーのコンピュータにある場合でも、Internet Explorer 4.0ではフォントオブジェクトをダウンロードし、解凍し、一時的にインストールする。

WEFTの現行バージョンでは、Internet Explorer 4.0から供給されるフォントを一般的なフォントとして識別しない。Internet Explorer 4.0でインストールしたユーザーは、システムにVerdana、Comic Sans MS、Arial Black、Impact、Webdingsが追加されるかもしれない。これらのフォントをシステムから削除できるユーザーもいるが、埋め込むことは望まれていない。

Q. Type 1フォントを使用できるか?

Type 1フォントを第一選択のフォントに指定し、Adobe Type Managerがインストールされていれば、WEFTでは識別可能である。しかし、Type 1フォントは"未知のステータス"として判断され、WEFTのお試し版では埋め込むことができない。

トップに戻る
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.

使ったフォント	特殊キャラクタ	オブジェクトサイズ
Pie	9	4.27K
Goudy Stout Bold	15	7.43K
Garamond Bold	15	10.3K
Garamond	19	10.3K
Script MT Bold	49	3.97K

フォントの埋め込み

フォントの埋め込み

埋め込みフォントの技術

フォントの埋め込みにおけるレベル

埋め込みフォントの例

例1：

例2：

例3：

例4：

Internet Explorer 4.0における制約

Internet Explorer 4.0におけるセキュリティ

Microsoft WEFTの利用

WEFTスタイルコード

カスケーディングスタイルシート ファイル

一般的な質問

Q.使用可能なフォントは?

Q.フォントの埋め込み許可を調べる方法は?

Q. ArialやTimes New Romanといった一般的なフォントまで埋め込む必要があるのか?

Q. Type 1フォントを使用できるか?

その他のリソース

カスケーディングスタイルシートファイル