CSS3

：

@規則

：

@font-face

　編集：2022.11.04 by T.A.

[Edge]。→、

フォント リソース。

@font-face { 定義リスト }
定義リスト 記述子を「;」で区切って定義する。

@font-face 規則は、［必要時に自動的に fetch された上で作動化される］ようなフォントに向けて、リンクを張れるようにする。これにより、作者は、フォントの候補を［所与のプラットフォーム上で可用なフォントの集合］に限ることなく、［ページのデザイン目標に近く合致するフォント］を選定できるようになる。［この規則が与える、一連のフォント記述子からなる集合］は、個々の書体のスタイル特徴に沿うような、［ローカル／外部］フォント リソースの所在を定義する。複数の @font-face 規則を利用して、［様々な書体を備えるフォント ファミリー］を構築することもできる。ユーザー エージェントは、［CSS フォント照合規則］の利用を通して、［所与のテキスト断片に必要な書体］のみを、選択的にダウンロードできるようになる。

Gentium と称されるダウンロード可能フォントを利用するためには： 

@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.woff);
}
p { font-family: Gentium, serif; }

ユーザー エージェントは、Gentium をダウンロードした上で、［p 要素内のテキスト］の描画時に、それを利用することになる。何らかの理由でフォントをサーブするサイトが可用にされてない場合、既定のセリフ フォントが利用されることになる。

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

<SPAN style="font-size:30px;
 font-family:Times New Roman,ＭＳ ゴシック;
">012ABCabc…あいう</SPAN><BR>
<SPAN style="font-size:30px;
 font-family:Times New Roman Regular,ＭＳ ゴシック;
">012ABCabc…あいう</SPAN><BR>
インストールされていればTimes New Romanが表示されます（英文など）。そのフォントに無いコードはＭＳ ゴシックで選択される。 

<SPAN style="font-size:30px;
 font-family:Test_Font, ＭＳ ゴシック;
">012ABCabc…あいう</SPAN><BR>
Test_Fontでコード0～5Ahまでの、つまり大文字まで、italic体指定をしています。
srcに「format("truetype")」を追加したらだめだった。

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：