最近リリースされたOpera 10ではWebフォント対応が行われたようなのでサンプルを作成してみました。
ちなみにWebフォントとはフォントファイルをロードし、HTMLの文字をそのフォントで描画する機能です。これにより指定のフォントでの描画が可能となるため閲覧者のOSにインストールされていないフォントをHTMLに使用することが可能となります。
※フォントは基本的にこのような埋め込み形式での使用に制限を設けているものが多いのでその辺りのライセンスは十分にチェックする様にしましょう。
サンプル作成はこちらのサイトを参考にしました。
Seven Web Fonts showcases - Opera Developer Community
http://dev.opera.com/articles/view/seven-web-fonts-showcases/#japanesewebfonts
HTML5、CSS3を利用する新聞の事例
http://devfiles.myopera.com/articles/751/japanese-newspaper.html
フォントについてはOS付属のフォントなどはライセンスの関係で使用できないので今回はこちらの「みかちゃんフォント」を使用しました。
※具体的にはそのなかの「みかちゃん-P」を使用しました。
こちらファイルサイズは約2.8MBとなっています。
※Webフォントはページロード時にダウンロードされますのでなるべく容量の少ないものを選ぶことによりサーバ負荷を抑えることが出来ます。
こちらフォント名やフォントファイル名が日本語だったので念のため以下の修正を行いました。
・フォント名を みかちゃん-P ではなく英語名の mikachan-P を使用。
・フォントファイル名を みかちゃん-P.ttf から mikachan-P.ttf に変更。
Macでフォントの英語名を調べるには以下の手順。
1. DLしたフォントをダブルクリックし、インストール。
2. Font Bookを開く(インストールした直後だと開かれている状態だと思います)。
3. インストールしたフォントを右クリックし、「フォントの検証」を実行。
4. 情報を展開すると2行目にフォントの英語名が表示されます。
ちょっとこちらの説明はシンプルなので少し手順を補足しておきます。
フォントインストール時に確認する方法
1. フォントをDLする。
2. フォントファイルをダブルクリック。
3. 「フォントのインストール」ボタンを押してフォントをインストール
4. 上記、リンク先で説明の有った Font Book が起動します。リンク先の手順で英語名を確認。
既にインストール済みのフォントの確認方法
1. 「アプリケーション」フォルダにある「Font Book」をダブルクリック。
2. 上記、リンク先で説明の有った Font Book が起動します。リンク先の手順で英語名を確認。
Windowsの場合
Windowsの場合は以下のサイトからリンクされているDLサイトから ttfname3.zip をDLし、解凍すると ttfname3.exe が生成されます。
メイリオ 『ことば・その周辺』
http://okrchicagob.blog4.fc2.com/?tag=%A5%E1%A5%A4%A5%EA%A5%AA#169
この実行ファイルにフォントをドラッグするとフォントの情報が含まれたXMLファイルが出力されます。
こちらをブラウザかエディタで開き、
<!-- Family -->
の下に記述されている英語名を確認します。
mikachan-P
mikachan-P
みかちゃん-P
今回の場合はこの様に出力されます。
Webフォントの使い方
こちらにサンプルを作成しました。
※ネットの速度が遅い環境で確認するとフォントファイルをDLするまではWebフォントの指定が反映されません。
ファイル構成は以下の様になっています。
・index.html
・mikachan-P.ttf( みかちゃん-P.ttf をリネームしたもの)
・style.css
以下のような簡単な記述で使用可能になります。
@font-face { /* Free font from: http://mikachan-font.com/ */ font-family: mikachan-P; src: url(mikachan-P.ttf) format("truetype"); } body { font-family: "mikachan-P"; font-size: 40px; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css; charset=UTF-8" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title></title> <body> ここの文字は画像でなくテキストとして設定してあるのでコピペ可能です。 </body> </html>
なお、Opera以外にもSafariやFirefoxでもWebフォントは既に使用可能です。
Safari 3.1でWebフォントを利用する--SafariのCSS対応 - builder by ZDNet Japan
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20370308,00.htm
Firefox 3.5のCSS対応：Webフォント、メディアクエリ、セレクタ - builder by ZDNet Japan
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20396452,00.htm
今回のOperaの対応によりIE以外の主なブラウザの最新版では同一の記述でWebフォントが使用可能となっています。
一応、IEでも使用可能ではあるのですがこちらは Embedded OpenType (EOT) File Format というまた別の規格を採用しているためIEでもWebフォントを使用したい場合は処理を分ける必要があります。
※逆にEOTのみを使用した場合、Safari(Ver4.0.3で確認)ではコピペが使えないという問題が有ります。
PDF 千夜一夜: WebFontのEmbedded OpenType (EOT) File Formatが公開
http://blog.antenna.co.jp/PDFTool/archives/2008/05/webfontembedded.html
FireFox3.1bとWebFont - Webと文字
http://d.hatena.ne.jp/project_the_tower2/20081023/1224753805
埋め込みに使用可能なフォントのリンク集
Fonts available for @font-face embedding - Webfonts.info
http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding
