font-face src の可能な形式値

Question

何をいつ使用するか、本当に必要かどうかをどうやって知ることができますか?

多くのサイトにこのような例がありますが、順序は異なります:

@font-face {
  フォントファミリー: '例';
  ソース: url('Example.eot');
  src: url('Example.eot?#iefix') format('embedded-opentype'),
       url('Example.woff2') format('woff2'),
       url('Example.woff') format('woff'),
       url('Example.ttf') format('truetype'),
       url('Example.svg#svgExample') format('svg');
}

しかし、次のような例も見たことがあります。

@font-face {
  フォントファミリー: '例';
  src: url('Example.woff2') format('woff');
}
@フォントフェイス {
  フォントファミリー: '例';
  src: url('Example.ttf') format('woff2-variations');
}
@フォントフェイス {
  フォントファミリー: '例';
  src: url('Example.otf');
}

形式がファイルの終わりと同じに見える場合もあれば、ファイルの終わりが省略されているか、少なくとも部分的に同じである場合もあり、完全にランダムな文字列であるように見える場合もあれば、単なるファイルの場合はまったく何も表示されない場合もあります。 。

Answer 1

考えられるすべてのフォーマット値を理解することは重要ではありません - それらの多くは実験的なブラウザ実装に由来するためです。

実際には、いくつかの書式設定値を CSS ブラウザーのプレフィックスと比較する場合があります。幸いなことに、それらの関連性は低くなりましたが、残念ながら、依然として関連性がある場合があります。

最初の

@font-face の例を参照してください: リーリー

.otf 形式('opentype')

.otf は実際には欠落していますが、ネットワークの使用状況とは関係ありません。 リーリー

TrueType と同様に、ローカルにインストールして任意のデスクトップ アプリケーションで使用できます。

フォント キャスティング用語: OTF フォント ファイルは、「ポストスクリプト フレーバー」Open Type フォントとも呼ばれます。

また、.ttf/truetype フォントは、「Truetype フレーバー」Open Type フォントとも呼ばれます。

.otf フォントには、woff2 と比較して高度なファイル圧縮がありません。

.eot 形式('embedded-opentype')

Internet Explorer でのみ使用されますが、これらの残虐行為でも少なくとも ttf/truetype をレンダリングできます。

.eot 廃止されました # (特殊な Windows 組み込みシステム上で実行される組み込みシステムを維持する必要がある場合を除きます)。
.svg形式('svg')

Webkit ブラウザ (safari、epphany、midori) および Android ブラウザでのみサポートされます。

ただし、上記のブラウザはすべて、woff2、woff、または truetype もサポートしています。

最も重要なのは、Chromium/Blink ベースのブラウザ (opera、Vivaldi、Brave、Internet Explorer 13/Edge) または Firefox ではサポートされていないことです。

いいえ

.svg

フォント ファイルは必要ありません (ただし、フォント ファイルは icomoon などのアイコン ジェネレーターの交換形式として便利に使用できます) .ttf 形式('truetype')

はおそらくサポートされているフォント形式の中で最も優れていますが、woff2 や woff ほどコンパクトではありません。

さらに、TrueType フォントはデスクトップ環境でも利用できるため、任意のアプリケーションでローカルにインストールして使用できます。

一部のユースケース (PDF 変換など) には依然として関連します。

可変フォント

この記事にあるような古いシンボルが表示される場合があります:

CSS ヒント

リーリー これらの追加の形式タイプは、可変フォントのサポートがまだ実験的だった時代に由来しています。

現在では、それらは必要なくなりました。通常の形式の識別子を使用するだけです。

あなたもこの形式を放棄する「かもしれません」

最新のブラウザのほとんどは、形式が指定されていない場合でも、フォント ファイルをフォント ファミリにマップできます。

それでも、それらを含めることは良い考えです。

ただし: 間違った形式値を使用すると、@font-face ルールに違反する可能性があります。

よくある間違い:

リーリー ＃＃＃ の代わりに ＃＃＃ リーリー

...ウェイトとスタイルのプロパティを忘れないでください

リーリー

可変フォント@font-face

この例では、font-weight およびその他のプロパティには、範囲を定義する 2 つの値が含まれています (例:

font-weight: 100 1000

)。

リーリー