必要条件

この記事に必要な予備知識

サンプル作成のツールとしてDreamweaverを使います(CS5以降が必要。CS5ではアップデータ11.0.3を適用し、「HTML5 パック for Dreamweaver CS5」をインストールする必要があります。

※HTML5とCSS3は現在策定中の草案です。本連載は執筆時点の草案の内容にもとづいており、正式に勧告されるまでに変更されることもあり得ます。

ユーザーレベル

初級

これまでの記事では、CSS3で新たに登場する border-radius と background を利用し、ブロックへの装飾を行いました。今回は、@font-face規則という、CSS3で新たに登場するフォント適用の仕組みについて紹介します。

前回のおさらい:HTML5文書とCSSを用意する

前回の記事では、次のようなHTML文書、CSSを作成しました。

<HTML>

1. <!DOCTYPE HTML> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>CS5 Web Premium について</title> 6. <link rel="stylesheet" type="text/css" href="styles.css"> 7. <!--[if lt IE 9]> 8. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 9. <![endif]--> 10. </head> 11. <body> 12. 13. <section class="section-main"> 14. <hgroup> 15. <h1>CS5 Web Premium</h1> 16. <h2>効果的なWebサイト、モバイル、デバイスコンテンツ制作を支援</h2> 17. </hgroup> 18. <p>標準規格に準拠したWebサイト、表現力豊かで現実感溢れるデジタル体験を構築する際に必要なすべてが揃ったソリューションです。</p> 19. <section class="section-sub"> 20. <h3>WEBデザイン</h3> 21. <p>HTML、CSS、JavaScriptに特化したWebデザインを開発できます</p> 22. </section> 23. <section class="section-sub"> 24. <h3>インタラクティブデザイン</h3> 25. <p>ビジュアルで、もしくはコードベースの開発により、自由な形式の魅力あるインタラクティブWebコンテンツやエクスペリエンスを作成できます。</p> 26. </section> 27. </section> 28. 29. </body> 30. </html>

<CSS>

1. section.section-main{ 2. /* part 2 */ 3. border:3px solid #006600; 4. -webkit-border-radius:20px; 5. -moz-border-radius:20px; 6. border-radius:20px; 7. /* part 3 */ 8. background:url(bg_01_tl.png) no-repeat, 9. url(bg_01_tr.png) no-repeat 100% 0, 10. url(bg_01_top.png) repeat-x, 11. url(bg_01_btm2.png) repeat-x 8px 100%, 12. url(bg_01_btm.png) repeat-x 0 100%, 13. #669900 url(bg_01_mdl.png) repeat-x; 14. padding:40px 80px 150px; 15. } 16. 17. /* other setting */ 18. body{ 19. font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; 20. fontsize:14px; 21. line-height:1.5; 22. } 23. 24. hgroup{ 25. display:block; 26. text-align:center; 27. margin:0 0 1.6em; 28. } 29. hgroup h1{fontsize:257%; margin:0;} 30. hgroup h2{fontsize:114%; margin:0;} 31. h3{fontsize:114%; margin:.6em 0;} 32. p { margin:0 0 .6em;}

今回は、「ウェブフォント(WebFonts)」と呼ばれる仕組みを利用し、このサンプル内の大見出しに対して独自のフォントを適用します。


ウェブフォントとは

ウェブフォントとは、CSSのfont-familyプロパティを利用し、Webページ上のテキストに対して、どんなフォントでも適用できる仕組みのことです。これまでは、「MS Pゴシック」や「ヒラギノ角ゴシックW3」などのように、限られた範囲でしかfont-familyプロパティを利用できませんでした。しかし、CSS3の@font-face規則の登場により、フォントファイルさえあればどんなフォントでもCSSで適用できるようになります。

使用するフォントファイルを用意する

フォントファイル(TTF)を入手する

一般的にコンピューターでは、TTF形式やOTF形式のフォントが広く利用されています。今回は、欧文フォント「Chunk」と和文フォント「モトヤLマルベリ3」を用意しました。どちらもオープンソースのフォントです。以下を参考にダウンロードしてください。

※フォントファイルは、Web上からダウンロードするなどして手軽に入手/利用することができます。しかし、ウェブフォントを利用するということは、フォントファイルをサーバーに置くことになり、フォントファイル自体の再配布に近い状態となってしまいます。そのため、フォントのライセンスに注意しなくてはなりません。市販のフォントはもちろん利用不可能ですが、著作権フリーであっても再配布を禁止しているフォントは多数あります。ウェブフォントに利用する時にはフォントのライセンスに気をつけましょう。

なお、この他のウェブフォント用に利用可能なフォントファイルを入手するには、下記を参考にしてください。

Web専用のフォント形式

TTF形式そのままでも利用できますが、ウェブフォントとして利用するためにはWeb専用の形式変換します。Web専用の形式にすることで、ファイル容量が減る、第三者によりダウンロードされデスクトップ上での二次利用を防げるなどの利点があります。また、後述するようにTTF形式をサポートしていないブラウザーもあるからです。

現在、「WOFF」というウェブフォント専用形式のフォント仕様が策定途中で、最新ブラウザの多くはWOFF形式に対応しています。しかし、Internet Explorer 4~8は「EOT」という形式のみにしか対応していません。また、ブラウザによってはTTFとOTFのみにしか対応していません。下記は主なブラウザーのフォント形式対応状況です。

  TTF OTF EOT WOFF SVG
Internet Explorer 4~8 × × × ×
Internet Explorer 9β × × ×
Firefox 3.5 × × ×
Firefox 3.6+ × ×
Opera 10+ × × × ×
Chrome 4~5 × ×
Chrome 6+ ×
Safari 3.1+ × ×
Safari Mobile (iOS 4.0) × × × ×
Safari Mobile (iOS 4.2) × ×

※意外かもしれませんが、Internet Explorerはバージョン4からウェブフォントに対応しています。これは、CSS2にウェブフォントが含まれており、当時のInternet Explorerがこれを元に実装したためなのです。その後、CSS2.1ではウェブフォントはいったん削除されました。そしてウェブフォントはCSS3で再登場し、2009年頃よりFirefoxやSafariなども対応してきたという経緯があるのです。

対応表から分かるように、すべてのブラウザーやそのバージョンが対応しているフォント形式はありません。また、ウェブフォント専用形式のWOFFに対応しているのはごく最新のブラウザーに限られています。そこで今回は、先ほどダウンロードしたTTFをWOFFとEOTに変換し、未対応のブラウザー用にTTFをそのまま利用することにします。そのため、合わせて3種類の形式のフォントファイルを用意します。

フォントの形式を変換するには、「@FONT-FACE GENERATOR」のようなWebサービスを利用する方法もありますが、より柔軟に対応するためにここではオフラインのツールを用いた方法を紹介します(もちろん、Webサービスを利用してフォント形式を変換しても問題なくウェブフォントとして利用できるでしょう)。

TTFをWOFFに変換する

FirefoxやChromeでフォントを利用するために、先ほどダウンロードしたTTF形式のフォントをWOFF形式に変換します。TTFをWOFFに変換するためには「sfnt2woff」を利用します。

WOFF形式への変換は「sfnt2woff」にTTF形式のフォントをドラッグ&ドロップするだけで完了します。

TTFをEOTに変換する

Internet Explorer 8以下でフォントを利用するために、先ほどダウンロードしたTTF形式のフォントをEOT形式に変換します。TTFをEOTに変換するためには「EOTFast」を利用します。残念ながらこのツールはWindows用のプログラムしか提供されていないため、Macユーザーの方はBoot Campなどを経由して利用してください。

EOT形式への変換は「EOTFast」にTTF形式のフォントをドラッグ&ドロップするだけで完了します。

フォントファイルを参照させる

TTF形式のフォントファイルを参照させる

先ほどまでに用意した3種類(TTF、WOFF、EOT)のフォントをサンプルの大見出し(「CS5 Web Premium」の部分)へ適用してみましょう。フォントを参照するために、以下のように@font-face規則を記述します。まずはTTFのみを読み込んでみましょう。

1. @font-face { 2. font-family: 'font1'; 3. src: url('/Chunk.ttf'); 4. }

@font-face 規則内のfont-familyプロパティには自由な名前を付けます。ここでは「font1」としました。srcプロパティでは、フォントファイルを参照します。「url( *** )」にフォントファイルのパスを指定します(background-imageプロパティなどの指定と同様です)。

合わせて、見出しなどの要素にfont-familyプロパティで読み込んだフォントを適用します。font-family の値は、@font-face内で付けた名前になるようにします。

1. @font-face { 2. font-family: 'font1'; 3. src: url('/Chunk.ttf'); 4. } /* <中略> */ 5. hgroup h1{ 6. font-family:'font1'; 7. fontsize:300%; 8. margin:0; 9. }

これにより、ChromeなどのTTF形式に対応しているブラウザーでウェブフォントが有効になります。

なお、オープンソースのフォントであっても、ほとんどの場合では著作権が存在します。CSSのコード内にコメントでライセンスや著作元などを表示しておくと安心です。例えば、フォント「Chunk」は「SIL Open Font License」というライセンスのもと「http://www.theleagueofmoveabletype.com/fonts/4-chunk」で提供されています。ですので、今回は例として次のようにライセンス情報を書き加えました。

1. @font-face { 2. font-family: 'font1'; 3. src: url('/Chunk.ttf'); 4. /* 5. * Chunk licensed under the SIL Open Font License 6. * http://www.theleagueofmoveabletype.com/fonts/4-chunk 7. */ 8. } /* <中略> */ 9. hgroup h1{ 10. font-family:'font1'; 11. fontsize:300%; 12. margin:0; 13. }

WOFF形式のフォントファイルを参照させる

ここまでの操作でウェブフォントを適用することができました。しかし、TTFよりもWOFF形式の方がファイル容量が軽量です。例えば、今回利用しているChunkの場合、TTF形式では31KB、WOFFに変換後は18KBです。日本語フォントの場合、容量の差はさらに大きくなります。

WOFF形式のフォントをTTF形式のものよりも優先的に適用できるようにCSSのコードを書き換えてみましょう。@font-face規則内のsrcプロパティに対して、「, (カンマ)」区切りで、優先したい順に複数のパスを並べます。このとき、そのフォントの形式を「format(***)」で合わせて併記します。

1. @font-face { 2. font-family: 'font1'; 3. src: url('fonts/Chunk.woff') format('woff'), url('fonts/Chunk.ttf') format('truetype'); 4. /* 5. * Chunk licensed under the SIL Open Font License 6. * http://www.theleagueofmoveabletype.com/fonts/4-chunk 7. */ 8. } /* <中略> */ 9. hgroup h1{ 10. font-family:'font1'; 11. fontsize:300%; 12. margin:0; 13. }

これにより、ChromeやFirefoxなどのWOFF形式に対応しているブラウザーはTTFより軽量で高機能なWOFF形式のフォントをダウンロードして利用します。一方、SafariなどWOFF形式には対応していないブラウザーはWOFF形式の記述は無視し、TTF形式のフォントをダウンロードし利用します。

なお、フォント形式に対するformat()の値は、次のように対応しています。

形式 フォントの拡張子 format()の値
Web Open Font Format .woff "woff"
TrueType .ttf "truetype"
OpenType .ttf, .otf "opentype"
TrueType with Apple Advanced Typography extensions .ttf "opentype"
Embedded OpenType .eot "embedded-opentype"
SVG Font .svg, .svgz "svg"

Internet Explorer用にEOT形式のフォントファイルを参照させる

ここまでWOFF形式やTTF形式について触れてきましたが、Internet Explorer 8以下はそれらのフォント形式に対応していません。しかし、EOT形式には対応しています。そのため、Internet Explorer には EOT形式のフォントを読み込ませるようにすることで、ウェブフォントを有効にすることができます。

Internet Explorer 8以下に的確にEOTフォントを読み込ませるためには、font-familyプロパティの先頭にEOTフォントへの参照を追加します。この時、拡張子「.eot」の末尾に「?」をつけ、さらにformat()の値に本来指定すべきでない値(なんでもよい)を指定します。今回は「format('oldIE')」としました。末尾の「?」と「format('oldIE')」は、Internet Explorer 8以下でEOTフォントのみを利用させるためのトリックです。

1. @font-face { 2. font-family: 'font1'; 3. src: url('fonts/Chunk.eot?') format('oldIE'), url('/Chunk.woff') format('woff'), url('/Chunk.ttf') format('truetype'); 4. /* 5. * Chunk licensed under the SIL Open Font License 6. * http://www.theleagueofmoveabletype.com/fonts/4-chunk 7. */ 8. } /* <中略> */ 9. hgroup h1{ 10. font-family:'font1'; 11. fontsize:300%; 12. margin:0; 13. }

これにより、Internet Explorer 8以下は最初のurl()の値を読み、「?」以降はクエリー文字として無視します。一方、その他のブラウザー(Internet Explorer9やFirefoxなど)は、各々に対応しているsrcの値を読み込むことになります。例えば、Internet Explorer 9は'oldIE'というフォーマットには対応していないため、2番目に指定されたwoffを読み込みます。これにより、古いInternet Explorerを含めた多くのブラウザーでウェブフォントが有効になります。

※この時点では特に解説していませんが、上図では一時的にInternet Explorerでborder-radiusやmultiple-backgroundなどのCSS3を疑似的に有効にしています。Internet ExplorerでCSS3を擬似的に扱う方法については次回以降に解説する予定です。

これにより、Internet ExplorerはEOTを、WOFF対応ブラウザーはWOFFを、それ以外のブラウザーはTTFを読み込むことができるようになりました。もちろん、Dreamweaverのライブビューでも表示することができます。

複数のウェブフォントを利用する

ウェブフォントでは複数のフォントを利用することもできます。ここでは、大見出しの副題「効果的なWebサイト~」の部分に和文フォント「モトヤLマルベリ3(MTLmr3m.ttf)」を適用してみましょう。

MTLmr3m.ttfについてもここまでと同様の流れでWOFF、EOT形式をそれぞれ用意し、@font-faceルールでそれぞれのフォントを参照します。フォントの名前(font-family)は「font2」としました。

1. @font-face { 2. font-family: 'font1'; 3. src: url('Chunk.eot'?') format(' embedded-opentype'), url('../fonts/Chunk.woff') format('woff'), url('../fonts/Chunk.ttf') format('truetype'); 4. /* 5. * Chunk licensed under the SIL Open Font License 6. * http://www.theleagueofmoveabletype.com/fonts/4-chunk 7. */ 8. } 9. 10. @font-face { 11. font-family: 'font2'; 12. src: url('fonts/MTLmr3m.eot?') format(' embedded-opentype'), url('fonts/MTLmr3m.woff') format('woff'), url('fonts/MTLmr3m.ttf') format('truetype'); 13. /* 14. * MTLmr3m licensed under the Apache License 15. * https://android.git.kernel.org/?p=platform/frameworks/base.git;a=commit;h=4234d40eae54ad9126fbc4b61cbbe8dc78d282bc 16. */ 17. } /* <中略> */ 18. hgroup h1{ 19. font-family:'font1'; 20. fontsize:300%; 21. margin:0; 22. } 23. hgroup h2{ 24. font-family:'font2'; 25. fontsize:114%; 26. margin:0; 27. }

ただし、和文フォントは文字数が多いためほとんどの場合にファイル容量が1MBを超えてしまいます。そのため、和文フォントの利用に関しては1書体までとしておくといいでしょう。


まとめ

ウェブフォントを利用すれば、Webページでのテキストの表現は大きく広がります。これにより、テキストを画像化するといった手法を減らすことができますし、表現が乏しかったCMSやブログなどから動的に出力されるテキストに対して、より豊かな表現を付与することができるでしょう。

海外では既にウェブフォントを利用しているWebサイトも多く、日本国内でも徐々にウェブフォントを利用したWebサイトが登場し始めています。これをきっかけにウェブフォントを利用してみてはいかがでしょうか。