builder by ZDNet Japanをご愛読頂きありがとうございます。

builder by ZDNet Japanは2022年1月31日にサービスを終了いたします。

長らくのご愛読ありがとうございました。

Safari 3.1でWebフォントを利用する--SafariのCSS対応

エ・ビスコム・テック・ラボ
2008-03-28 08:00:00
  • このエントリーをはてなブックマークに追加

フォントの種類の指定

 @font-faceのsrcでは、フォントファイルのURLといっしょにフォントの種類を指定している。フォントの種類はformat()を使って次のような形で指定する。

@font-face{
src: url(〜) format("〜");
}

 フォントの種類がOpenTypeの場合は「opentype」、TrueTypeの場合は「truetype」と指定する。formatの記述は必須ではないが、ブラウザがフォントの種類を判断して、未対応のフォントをダウンロードしないようにする効果がある。

Webフォントの規格とInternet Explorerの対応

 Webフォントの規格は、CSS 2の「15.3 Font selection」で定義されている。しかし、CSS 2.1では削除され、CSS 3の草案「Web Fonts」として復活した。

 Safari 3.1が本格的にWebフォントに対応したブラウザとなったわけだが、Internet Explorerはバージョン4から対応している。ただし、使用できるフォントファイルの形式は、Embedded OpenType(EOT)だけとなっており、使い勝手の悪さなどから普及しなかった。

 現在でも当時のデモンストレーションページ「Font embedding」が残っており、Internet Explorerのバージョン7や8(ベータ版)でもEOTファイルを使ったWebフォントの表示を確認することができる。EOTファイルを生成するWEFTというアプリケーションも、開発は止まったままだがダウンロードすることが可能だ。なお、Safari 3.1では、EOTファイルを使ったフォントの表示はサポートされていない。

MicrosoftのWebフォントのデモンストレーションページをInternet Explorer 7で表示したもの。文字はEOT形式のフォントで表示されている。 MicrosoftのWebフォントのデモンストレーションページをInternet Explorer 7で表示したもの。文字はEOT形式のフォントで表示されている。

 次回は、CSS 3の草案を参考にしながら、Webフォントでできることをもう少し詳しく見て行きたい。

ブログの新規登録は、2021年12月22日に終了いたしました。

folllow builer on twitter
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]