IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
CSS3リファレンス
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > CSS3リファレンス > フォント > @font-faceの解説
  カテゴリ別さくいん
  タグ別さくいん

@font-faceの解説

Webフォントを指定するには?

@ルール書式

@font-face {

  font-family:【フォント集合名】;

  src:【フォントへの参照】 [ ,【フォントへの参照】... ];

  [ 【オプションのフォント記述子】:【オプションのフォント記述子の値】;... ]

}

対応ブラウザ

  • IE 9:○
  • Firefox 10.0:○
  • Opera 11.61:○
  • Chrome 17.0:○
  • Safari 5.1:○

    ※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
    ブラウザWindows 7上で動作確認を行っています。
    ユーザーの設定より、異なる挙動をする場合があります。

フォント記述子一覧

font-familyとsrcの指定は、省略しても文法的なエラーにはなりませんが、フォントを実際に要素に適用するためには必須です。

「font-」で始まるフォント記述子は、同じ名前のプロパティとの照合に使用されます。そのため、指定できる値の種類も、同じ名前のプロパティと共通になります。

ただし、bolder(より太字に)のような、相対的な指定方法は、フォント記述子には使用できません。

名前内容
font-familyフォントの属するフォント集合(フォント・ファミリー)名を指定します。
srcフォントのデータが格納されているファイルを指定します。
詳細は本文解説を参照ください。
font-styleフォントが通常体か、イタリック体か、斜体かを記述します。
キーワードnormalが指定された場合は通常体です。
キーワードitalicが指定された場合はイタリック体です。
キーワードobliqueが指定された場合は斜体です。
font-weightフォントの太さを記述します。
キーワードnormalboldと100から900までの100刻みの数値が指定できます。
normalは400に相当し、boldは700に相当します。
font-stretchフォントの幅の拡大縮小を記述します。
キーワードとして、
ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expandedが使用できます。
normalを通常の幅として、上にあげたものほど縮小され、下にあげたものほど拡大されます。
IEとFirefoxのみ実装。
font-variantフォントが異体字であるかを記述します。
キーワードとして、normal、small-capsが指定できます。
normalが指定された場合は通常の字体です。
small-capsが指定された場合、フォントはスモールキャップ(小文字として小さな大文字を使う異体)です。
Operaは未実装です。
font-feature-settingsOpenTypeフォーマットでのタグによる字体指定を記述します。
IEとChrome、Safariが実装していて、ベンダープレフィックスが必要です。
unicode-rangeフォントが対応している文字の範囲を、ユニコードのコード位置を使って記述します。
必要とする文字範囲に対応していないフォントはダウンロードされません。
書式は「U+」に文字の16進表記のコード位置をハイフンでつなげたものです。(例;「U+0-7F」)
ワイルドカードとして「?」が使えます。(例:「U+3??」)
カンマ区切りで複数の範囲を指定できます。(例:「U+0-7F, U+590-5ff」)
単一の文字だけからなる範囲を指定する場合はハイフン以下は不要です。(例;「U+45」)
Operaは未実装です。

解説文

Webフォントの仕組みを利用すると、ウェブ上に公開されたフォントを、Webページの表示用のフォントとして指定することができます。

もっともシンプルなケースでの指定は、以下のようになります。この例では、フォントファイルである、font1.woffはHTMLファイルと同じディレクトリに公開されています。

@font-face {
    font-family: myfont;  /* フォントにフォント集合名を付ける */
    src: url(font1.woff);  /* フォントのURLを指定する */
}

div#out{
    font-family:myfont; /* フォント集合名を使って要素に適用する */
}

Webフォントの利用は、サーバー上のフォントの用意、@font-faceルールでのフォントの登録、要素のスタイル指定でのフォントの適用、という3つの手順からなっています。

サーバー上のフォントの用意

Webフォントで、サーバー上のフォントとして利用可能なのは、URLを通じてアクセス可能な形で公開されている、Webフォントに対応した以下のフォーマットのフォントです。

フォーマット拡張子内容
WOFF (Web Open Font Format).woffWebページ埋め込み用フォーマット。軽量でライセンス情報を埋め込むことができます。
TrueType.ttfサイズの拡大縮小に対応可能な、PC環境で一般的なフォーマット。IE8以前のIEは未対応。
OpenType.ttf .otfTrueTypeをPostscriptフォントを含むように拡張したフォーマット。
実体がPostscriptフォントの場合は拡張子が「.otf」になります。IE8以前のIEは未対応。
Embedded OpenType.eotMicrosoft開発のWebページ埋め込み用フォーマット。IEのみ対応。
SVGフォント.svg .svgz字形をSVG(Scalable Vector Graphics)で記述したフォーマット。IEとFirefoxは未対応。

Webフォントでは、サーバー上のフォントは、既定では、同じドメインで公開されているHTMLファイルにしか適用できません。

この制限を越えてフォントを利用できるようにするためには、フォントを公開しているサーバーの側で、「Access-Control-Allow-Origin」HTTPヘッダーをフォントへのリクエストに対するレスポンスに付加する必要があります。

自分でフォントを公開しなくても、こうした第三者が公開したフォントを利用することもできます。すでにフォントの検索提供サービスが複数存在しており、公開されたフォントを有償または無償で利用できるようになっています。

サーバー上のフォントの使用に関しては、フォントライセンスを確認し、使用条件に違反しないように注意する必要があります。

@font-faceルールでのフォントの登録と要素への適用

用意したサーバー上のフォントを適用するためには、まず、@font-faceルールで、読み込んだフォントを表す、仮想的なフォントの登録を行う必要があります。

(@font-faceルールは、CSSで個別の見た目の指定に属さない設定を行うための構文である、@ルールの一つです)

ここで登録するフォントは、読み込んだフォントを本体とする仮想的なフォントで、通常のフォントと同じように、fontプロパティなどを使用して、対象の要素に適用することができます。

@font-faceルールで、フォント属性を記述するのに使用される、srcやfont-familyなどの要素を、フォント記述子と言います。名称が同じ場合でも、これらはプロパティとは異なります。

@font-face {
    /* この仮想的なフォントのフォント集合名を定義 */
    font-family: myfont; 
    /* この仮想的なフォントの本体となるフォントへの参照URL */
    src: url(http://example.com/serverfont.woff); 
}

フォント記述子「font-family」では、この仮想的なフォントが属するフォント集合(フォント・ファミリー)の名前を宣言します。このフォントを参照する際にこの名前が使われます。

フォント記述子src」には、この仮想的なフォントの本体となるフォントを指定します。ローカル環境インストールされたフォントと、サーバー上のフォントを指定することができ、それぞれで書式が異なります。

ローカル環境インストールされたフォントへの参照の場合は「local(フォント名)」という書式で、フォント名を指定します。

サーバー上のフォントへの参照の場合は「url(フォントURL)」という書式で、フォントが置かれているURLを指定します。

フォントのフォーマットがSVGフォントだった場合は、フォントIDをハッシュ形式(#id)で指定します。(例:IDがfontidだった場合、「url(http://example.com/font.svg#fontid)」)

サーバー上のフォントへの参照に限り、「url(フォントURL) format(フォントのフォーマット)」という書式で、フォントファイルフォーマットを指定することもできます。この指定は、フォントを正しく読み込むための補助情報としてブラウザに利用されます。

フォーマットを指定する文字列は以下の通りです。

フォーマットフォーマット指定
WOFF (Web Open Font Format)"woff"
TrueType"truetype"
OpenType"opentype"
Embedded OpenType"embedded-opentype"
SVGフォント"svg"

src」でのフォントの指定は、カンマ区切りで、優先度順に複数の候補を記述することができます。

複数の候補を指定することで、すでにローカル環境フォントインストールされている場合にはダウンロードを抑制したり、あるいは、サーバーアクセス不能な時にはローカル環境の代替フォントを使用する、といったことが可能になります。

なお、IE8以前のIEカンマ区切りでの複数の候補の指定と「format()」に対応していません。

以下の例では読み込むフォントとして候補を3つ指定しています。

@font-face {
    font-family: myfont; 
    src: local(Font1), url(font1.woff), url(http://example.com/font1.woff); 
}

フォントの適用については、通常のフォントも@font-faceルールで登録したフォントも全く同じです。以下では、font-familyプロパティを利用して指定しています。

@font-face {
    font-family: myfont; 
    src: url(font1.woff); 
}

/*  font-familyが一致するので、上で登録したフォントが適用され、 */
/*  font1.woffがダウンロードされて表示に使用される。 */

div#out{
    font-family:myfont;
}

クロスブラウザ対応のための、「src」フォント記述子の記述方式

Webフォントでは、IE6IE8が、対応しているフォーマットや実装に独自性が強いこともあり、最新版ではない複数の種類のブラウザに対応するためには、記述に工夫が必要です。

ここではFontspringによって考案された方式を紹介します。

@font-face {
    font-family: 'MyFont';
    src: url('myfont.eot?#iefix') format('embedded-opentype'), /* IE6~IE8 向け */
        url('myfont.woff') format('woff'), /* 主要最新ブラウザ向け */
        url('myfont.ttf')  format('truetype'), /* IE以外の旧ブラウザ向け */
        url('myfont.svg#svgId') format('svg'); /* モバイル等その他のブラウザ向け */
}

IE6IE8は、複数のフォント候補の指定に対応しておらず、format()の指定にも対応していません。そこで、最初にIE6IE8向けのEmbedded OpenTypeフォーマットの指定を行い、URLの最後に「?」を付けます。これによって、IEは「?」以降の、他のブラウザのための候補の指定を、クエリー文字列としてみなして無視します。

それ以降の候補は、通常の優先度順の記述です。まず、最新ブラウザ向けに、WOFFフォーマット、それ以前のバージョンの主要ブラウザ向けに、TrueTypeフォーマット、それ以外のモバイルブラウザ等のためにSVGフォント・フォーマットを指定します。

ブラウザ向けのファイル・フォーマットを用意したうえで、このように記述することで、ほとんどのブラウザに対応することができます。

@font-faceルールでのフォントの登録の応用

@font-faceルールで行うフォントの登録では、「フォント集合名」と「フォントの本体への参照」以外にも、追加の属性を記述することができます。

以下の例では、同じフォント集合「myfont」に、文字の太さの異なる二つの仮想的なフォントを定義しています。

@font-face {
    font-family: myfont;
    src: url(http://example.com/myfont-normal.woff);
    font-weight:normal;
}

@font-face {
    font-family: myfont;
    src: url(http://example.com/myfont-bold.woff);
    font-weight:bold;
}

ここで注意する必要があるのは、@font-faceルールでフォント属性を記述する、font-familyやfont-weightといったフォント記述子は、フォントを、「どのように表示するか」を指定するものではない、ということです。

そうではなく、フォント記述子の指定は、このフォントが、どのような特徴を持っているのか、ということを記述するものです。

たとえば、フォント記述子で、「font-weight:bold;」という記述をした場合、これは、「このフォントを太字にして表示せよ」という指定ではありません。そうではなくて、「このフォントを太字のフォントとして登録する」という指定になります。そのため、要素のスタイル指定で、「font-weight:bold;」が指定された場合は、このフォントが適用されます。

一般に、要素にフォント関連スタイル指定を行ったとき、どのフォントが選択されるかは、指定したプロパティに、フォント属性が一致しているかどうかが基準になります。

以下の例では、要素のスタイル指定によって「フォント集合がmyfont」で、かつ、「太字」のフォントをこの要素に適用するように指定されています。

ブラウザは、ローカル環境インストールされているフォントの一覧に、@font-faceルールで登録された仮想的なフォントを含めたうえで、このような特徴を持ったフォント検索します。

その結果、@font-faceルールで登録された、「myfont-bold.woff」を実体とする仮想的なフォントが条件に合うため、この要素の表示のために選び出されます。

(ただし、これは「もっとも近い」フォントを選び出す既定のアルゴリズムにもとづいて行われるため、プロパティが完全に一致しない場合でも、そのフォントが選択されることもあります)

こうしたケースでは、「myfont-bold.woff」は、太字のフォント・データが収められたファイルであることが普通です。

div#out1{
    /* myfont-bold.woffが適用される */
    font-family:myfont;
    font-weight:bold;
}

フォント記述子には、すでに述べた「src」のほかには、以下の記述子が指定可能です。

フォント記述子に指定できる値は、相対指定(bolder「より太く」や、wider「より幅広に」など)が使用できないほかは、同名のプロパティと同じです。

ここで指定されたフォント属性は、ブラウザフォントを実際にダウンロードするかどうかの判断にも使用されます。@font-faceルールで登録されていても、実際にはどの要素のスタイル指定にも一致しない(つまり、ページの表示に実際には使用されない)フォントファイルダウンロードされません。

したがって、このような指定は、フォント属性ごとに分割したファイルとして提供し、必要なものだけダウンロードさせる、という目的に使用できます。

名前内容
font-familyフォントの属するフォント集合(フォント・ファミリー)名を指定します。
font-styleフォントが通常体か、イタリック体か、斜体かを記述します。
font-weightフォントの太さを記述します。
font-stretchフォントの幅の拡大縮小を記述します。
unicode-rangeフォントの対応している文字の範囲を、ユニコードのコード位置を使って記述します。
font-variantフォントが異体字であるかを記述します。現在のところ、スモールキャップ(小文字として小さな大文字を使う異体)のみが指定できます。
font-feature-settingsOpenTypeフォーマットでのタグによる字体指定を記述します。

サンプルソース

サンプルを試すときは、フォントURL(「/fonts/font1.woff」「/fonts/font2.woff」「/fonts/font3.woff」)の部分を、実際に表示させるサーバー上のフォントURLに置き換え、「format('woff')」の部分を、実際のファイルフォーマットに合わせてください。

IE9は、TrueTypeOpenType形式のフォントが持っている、埋め込み許可設定をチェックするため、Webフォント向けに作成されたわけではないフォントは、適用できないことがあります。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

 /* フォント集合 myfont の通常のフォントとして登録します */
 @font-face{
     font-family:myfont;
     src: url(/fonts/font1.woff) format('woff');
 }

 /* フォント集合 myfont の太字フォントとして登録します */
 @font-face{
     font-family:myfont;
     font-weight:bold;
     src: url(/fonts/font2.woff) format('woff');
 }

 /* フォント集合 myfont のイタリック体フォントとして登録します */
 @font-face{
     font-family:myfont;
     font-style:italic;
     src: url(/fonts/font3.woff) format('woff');
 }

 p {
     width:400px;
 }

 p#p1{
     font-family: myfont;
 }

 p#p2{
     font-family:myfont;
     font-weight:bold;
 }

 p#p3{
     font-family:myfont;
     font-style:italic;
 }
</style>
</head>
<body>
<p id="p1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse vitae condimentum sem.
Proin consectetur volutpat neque, facilisis vestibulum nisl eleifend in. 
</p>
<p id="p2">Nunc id mauris tortor. 
Vivamus aliquet dignissim consectetur. 
In sit amet purus massa, eu interdum nisl. 
Phasellus eu ante nisi. 
Curabitur congue sagittis nibh, vitae scelerisque nibh ultricies ut. 
</p>
<p id="p3">Vestibulum fermentum, sem eu mollis vehicula, 
odio neque lacinia metus, vitae rhoncus purus mi eget nunc. 
Nam dignissim porta velit eu vehicula. 
Suspendisse metus ligula, pharetra sed venenatis ut, ultricies sit amet erat. 
Duis elit ante, laoreet vitae imperdiet condimentum, tristique ut dui. 
Nulla dignissim, justo non dapibus interdum, tellus nisl sagittis magna, 
id fringilla leo magna at velit. Duis feugiat libero odio, id vehicula mi. 
Sed urna lacus, ultrices sit amet euismod eget, laoreet semper justo.
</p>

</body>
</html>

関連項目

(関連項目はありません)



シャープのマスクシャープのマスク
シャープが製造・販売する不織布マスク。
Surface Book 3Surface Book 3
Microsoftが販売するデタッチャブルPC。
Surface Go 2Surface Go 2
Microsoftが発表した2in1 PC。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2024年3月19日現在
ランキング1   ICT (用語辞典)
ランキング2   AirDrop (用語辞典)
ランキング3   コンテキスト  (用語辞典)
ランキング4   セグメント  (用語辞典)
ランキング5   アノテーション  (用語辞典)
ランキング6   オムニチャネル  (用語辞典)
ランキング7   スワイプ  (用語辞典)
ランキング8   インスタンス化  (用語辞典)
ランキング9   カラム  (用語辞典)
ランキング10   FOMO  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについて運営会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2023 GRAS Group, Inc. All rights reserved.