CSS @font-face| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
ページコンテンツ
@font-face CSS プロパティとは
トピック：スタイルシートで使用されるフォント名とダウンロード可能なフォントを関連付けるために使用されるルール内でフォントファミリ記述子が使用され、フォントに名前を付け、src記述子は外部フォント名に関連付けられます。
プロパティ @font-face
- 基本 書式：
@font-face {font-properties:fontname ;src:url( フォントファイルパス ); }実例 コード 1
サンプル コードを試す@font-face{
font-family: MyFont;
src: url(OpenSans-Bold.woff);
}
/*"MyFont"という名前のフォントを指定し、
ユーザーがそのフォントをインストールしていない
又は見つからな場合いは 異なる名前が試めす（URLを指定）*/- 使用上の注意：
font-familyやfontのようなプロパティ内で名前として使用できますが、ダウンロード可能なフォントがサポートされていない場合、又は 、何らかの理由でフォントが読み込まれない場合に、他のフォント名をフォールバックとして指定することが、必要 です。
- 情報：
@ font-faceルールを使用すると、ユーザーが自分のコンピュータにインストールしたフォントの数に制限を受ける必要 はない 。
- トピック：
@ font-faceに対応する規則を追加することによって、太字又は 、斜体のような特定のフォント特性が設定されているときに、ダウンロード可能な特定のフォントの選択を設定することもする
プロパティ値
| パラメータ | 値 | 説明 |
|---|---|---|
font-family | name | font-familyフォントプロパティの値として使用されるフォント名を定義する |
src | url | 使用するフォントファイルの場所を指定する フォントをダウンロードするURLを定義する |
font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | オプション。フォントをどのようにテキストの幅を引き伸ばすかを定義する デフォルト値は "normal"です。 |
font-style | normal italic oblique | オプション。有効なfont-styleプロパティ値。フォントのスタイル設定方法を定義する デフォルト値は "normal"です。 |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 | オプション。フォントの太字を定義する デフォルト値は "normal"です。有効なfont-weightプロパティ値（相対値、bolderおよびを除くlighter）。 |
unicode-range | unicode-range | オプション。フォントがサポートするUnicode文字のコードポイント範囲を定義する デフォルト値は "U + 0-10FFFF"です。 |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 | |||||
|---|---|---|---|---|---|---|
| @font-face | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| 基本 サポート | フルサポート◯4 | フルサポート◯12 | フルサポート◯3.5 | フルサポート◯4 | フルサポート◯10 | フルサポート◯3.1 |
| WOFF | フルサポート◯6 | フルサポート◯あり | フルサポート◯3.5 | フルサポート◯9 | フルサポート◯11.1 | フルサポート◯5.1 |
| WOFF 2 | フルサポート◯36 | フルサポート◯14 | フルサポート◯39 | サポートなし✖ | フルサポート◯23 | フルサポート◯10 |
| SVG fonts | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ | フルサポート◯あり |
font-display | フルサポート◯60 | サポートなし✖ | フルサポート◯58 | サポートなし✖ | フルサポート◯47 | フルサポート◯あり |
font-family | フルサポート◯4 | フルサポート◯12 | フルサポート◯3.5 | フルサポート◯6 | フルサポート◯9 | フルサポート◯3.1 |
font-feature-settings | サポートなし✖ | サポートなし✖ | フルサポート◯34 | サポートなし✖ | サポートなし✖ | サポートなし✖ |
font-variation-settings | フルサポート◯62 | サポートなし✖ | フルサポート◯60 | サポートなし✖ | フルサポート◯49 | サポートなし✖ |
font-style | フルサポート◯4 | 不明 | フルサポート◯3.5 | フルサポート◯4 | フルサポート◯10 | フルサポート◯3.1 |
font-weight | フルサポート◯4 | フルサポート◯12 | フルサポート◯3.5 | フルサポート◯4 | フルサポート◯10 | フルサポート◯3.1 |
src | フルサポート◯4 | フルサポート◯12 | フルサポート◯3.5 | フルサポート◯6 | フルサポート◯9 | フルサポート◯3.1 |
unicode-range | フルサポート◯あり | フルサポート◯あり | フルサポート◯36 | フルサポート◯9 | フルサポート◯あり | フルサポート◯あり |
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 | ||||||
|---|---|---|---|---|---|---|---|
| @font-face | Android | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet |
| 基本 サポート | フルサポート◯あり | フルサポート◯あり | フルサポート◯12 | フルサポート◯4 | フルサポート◯10 | フルサポート◯あり | フルサポート◯あり |
| WOFF | フルサポート◯4.4 | フルサポート◯あり | フルサポート◯あり | フルサポート◯4 | フルサポート◯11 | フルサポート◯5 | フルサポート◯あり |
| WOFF 2 | フルサポート◯36 | フルサポート◯36 | フルサポート◯14 | フルサポート◯39 | フルサポート◯23 | フルサポート◯10 | フルサポート◯3.0 |
| SVG fonts | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ | フルサポート◯あり | サポートなし✖ |
font-display | フルサポート◯60 | フルサポート◯60 | サポートなし✖ | フルサポート◯58 | フルサポート◯47 | フルサポート◯あり | サポートなし✖ |
font-family | フルサポート◯2.2 | 不明 | フルサポート◯12 | フルサポート◯4 | フルサポート◯12 | フルサポート◯3.1 | フルサポート◯あり |
font-feature-settings | サポートなし✖ | サポートなし✖ | サポートなし✖ | フルサポート◯34 | サポートなし✖ | サポートなし✖ | サポートなし✖ |
font-variation-settings | フルサポート◯62 | フルサポート◯62 | サポートなし✖ | フルサポート◯60 | フルサポート◯あり | サポートなし✖ | サポートなし✖ |
font-style | フルサポート◯あり | 不明 | 不明 | フルサポート◯4 | フルサポート◯10 | フルサポート◯あり | フルサポート◯あり |
font-weight | フルサポート◯あり | フルサポート◯あり | フルサポート◯12 | フルサポート◯4 | フルサポート◯10 | フルサポート◯あり | フルサポート◯あり |
src | フルサポート◯2.2 | 不明 | フルサポート◯12 | フルサポート◯4 | フルサポート◯12 | フルサポート◯3.1 | フルサポート◯あり |
unicode-range | 不明 | 不明 | フルサポート◯あり | フルサポート◯36 | 不明 | フルサポート◯あり | フルサポート◯あり |
- 情報：
- 特定のフォントのサポートは、ブラウザによって大きく異なる。
Internet Explorerは.eotと.wofタイプのフォントをサポートしているが、Firefox,Chrome,Safari,Operaは.woff,.ttf,.otfタイプのフォントをサポートしている。
