CSS3

@規則用記述子

src

[Edge]○。●、mdn

フォント参照指定。

フォント データを包含しているリソースを指定する。@font-face 規則が妥当になるためには、これが要求される。その値は、カンマで分離されたリストであり、優先順位付けられた、一連の［外部参照または［ローカルにインストールされたフォント書体名］］からなる。ユーザー エージェントは、フォントが必要になったときに、リストされている参照の集合を走査した上で、成功裡に作動化できる最初のものを利用する。無効なデータを包含しているフォントや、ローカル フォント書体が見出されないものは、無視され、ユーザー エージェントはリスト内で次にあるフォントを読み込む。

<url>#

<url>＝format(<string>#)]? |
　<font-face-name>

<string>

以下のCSSが組み込んであります：

<SPAN style="font-size:30px;
 font-family:Font_url;
">ABCabc012T.…あいう</SPAN>

「Blackadder ITC」を読み込む

以下のCSSが組み込んであります：

<SPAN style="font-size:30px;
 font-family:Font_url2;
">ABCabc012T.…あいう</SPAN>

「Calibri Bold」無かった場合「Blackadder ITC」を読み込む

<font-face-name> ●

＝local(フォントファミリー名)

†は、ローカルにインストールされた、より大きなファミリ内で単独のフォント書体を一意に識別するような、形式に特有な文字列を与える。<font-face-name> の構文†は "local("、")" で括られたフォント ファミリー名である。

名前は、任意選択で引用符で括ることもできる。括られていない場合の名前は、引用符で括られないファミリ名の処理規約に従って、空白で分離された識別子たちが成す連列でなければならない ― それは、識別子たちを 1 個のスペースで順に連結することにより、文字列に変換される。

local()

＝local(フォントファミリー名)

以下のCSSが組み込んであります：

<SPAN style="font-size:30px;
 font-family:Font_local;
">ABCabc012…あいう</SPAN>

インストール済みの「Times New Roman」をフォント名「Font_local」とする

以下のCSSが組み込んであります：

<SPAN style="font-size:30px;
 font-family:Font_local2;
">ABCabc012…あいう</SPAN>

ローカルに「5c-Yen Gothic JP」の太字が無かったら「Blackadder ITC」を読み込む

CSS における他の URL と同様に、URL は相対的でもよい ─ その場合、［@font-face 規則を包含しているスタイルシートの所在］から相対的に解決される。SVG フォントの場合、URL は［SVG フォント定義を包含している文書］内の要素を指す ─ 要素参照が省略されている場合、［定義されているフォントのうち、最初のもの］への参照が黙示される。同様に、フォント コンテナ形式が複数のフォントを包含し得る場合も、所与の 1 個の @font-face 規則用に読み込まれるフォントは、きっかり 1 個になるものとする。素片識別子は、どのフォントを読み込むかを指示するために利用される ─ これらは、[RFC8081] にて定義される、フォントの PostScript 名を利用する。適合ユーザー エージェントは、素片識別子が［未知／未サポート］である場合には、そのフォント リソースをダウンロードすることなく飛ばすものとする。例えば、OpenType フォント集をサポートしない旧ユーザー エージェントは、リスト内で次にある URL へ飛ぶことになる。

この仕様にて定義される形式文字列： formatの文字列

TrueType と OpenType [OPENTYPE] の間ではよくある用法が重なり合っているので、形式ヒント［"truetype" と "opentype"］は、同義と見なすものとする ─ 形式ヒント "opentype" は、フォントが［Postscript CFF スタイル グリフ データ あるいは OpenType レイアウト情報］を包含することを意味するわけではない（より深い背景は 付録 A を見よ）。

@font-face {
  font-family: bodytext;
  src: url(ideal-sans-serif.woff2) format("woff2"),
       url(good-sans-serif.woff) format("woff"),
       url(basic-sans-serif.ttf) format("opentype");
}

作者は、所与のフォント用に［ローカルに可用な複製が在ればそれを利用し、無ければダウンロードする］ことを選好する場合には、local() を利用できる。その引数 <font-face-name> †は、ローカルにインストールされた、より大きなファミリ内で単独のフォント書体を一意に識別するような、形式に特有な文字列を与える。<font-face-name> の構文†は "local("、")" で括られたフォント ファミリー名である。名前は、任意選択で引用符で括ることもできる。括られていない場合の名前は、引用符で括られないファミリー名の処理規約に従って、空白で分離された識別子たちが成す連列でなければならない ─ それは、識別子たちを 1 個のスペースで順に連結することにより、文字列に変換される。

【† <font-face-name> の構文が "local( … )" の括りも含むのか含まないのか、記述が紛らわしいが、src 記述子の値定義欄に整合させるためには、含める必要がある。】

/*  Gentium の regular 体  */
@font-face {
  font-family: MyGentium;
  src: local(Gentium),    /*  Gentium がローカルに可用なら，それを利用  */
       url(Gentium.woff); /*  他の場合はダウンロード  */
}

¶以下省く

テスト