CSS3フォント

@font-face は CSS3 のモジュールです。主に独自に定義した Web フォントを Web ページに埋め込みます。@font-face モジュールの登場により、Web 開発でフォントの使用について心配する必要がなくなりました。 Web セーフ フォントのみを使用する必要はありません。 IE はそのようなことをサポートできるのかと疑問に思う人もいるでしょう。 @font-face 関数は IE4 からサポートされていたので、きっと驚かれるでしょう。英語の Web サイトやブログを見て、ホームページ上のロゴ、タグ、ページ上の手書きの英語スタイルなど、美しいカスタム Web フォントを目にした場合、これらはすべて @font-face によって実装されています。

まず、@font-face の文法規則を見てみましょう:

@font-face {

[font-family: <family-name>;]?

[ソース : [ <uri> [format(<string>#)] #;]?

[unicode-range: <urange>#;]?

[font-variant: <font-variant>;]?

[font-feature-settings:normal|<feature-tag-value>#;]?

[font-stretch: <font-ストレッチ>;] ?

[font-weight: <weight>];

[font-style: <style>];

}

値の説明:

font-family: のフォント名を設定します。テキスト。

font-style: テキストのスタイルを設定します。

font-variant: テキストが大文字か小文字かを設定します。

font-weight: テキストの太さを設定します。

font-stretch: テキストを水平方向に伸ばすかどうかを設定します。

font-size: テキストのフォントサイズを設定します。

src: カスタム フォントの相対パスまたは絶対パスを設定します。この属性は @font-face ルールでのみ使用できることに注意してください。

ブラウザとの互換性

@font-face とのブラウザ互換性の問題と言えば、これにはフォント形式の問題が関係します。ブラウザによってフォント形式のサポートに一貫性がないため、これは誰にとっても必要です。どのようなものかを調べてみましょうのフォントは、さまざまなバージョンのブラウザでサポートされています。以前、いくつかのフォント形式について簡単に説明しましたが、皆さんが理解できるように、この問題について個別に説明します。

1. TrueTpe(.ttf) 形式:

.ttfフォントは Windows および Mac で最も一般的なフォントです。RAW 形式であるため、このフォントをサポートするブラウザには [IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2] が含まれます。 +];

2. OpenType (.otf) 形式:

.otf フォントは、TrueType に基づいて構築された独自のフォント形式であるため、このフォントをサポートするブラウザーも提供されます。 [Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile Safari4.2+];

3. Web オープン フォント フォーマット (.woff) 形式:

フォントはWeb フォントの中で最も優れた形式であり、オープンな TrueType/OpenType 圧縮バージョンであり、メタデータ パッケージの分離もサポートしています。 ];

4. 埋め込みオープンタイプ (.eot) 形式:

.eot フォントは、TrueType から作成できます。このフォントをサポートするブラウザは

です。 .svg ) 形式:

.svg フォントは、SVG フォント レンダリングに基づく形式です。このフォントをサポートするブラウザには、[Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+] が含まれます。

注: このセクションのブラウザ効果を実装するには、上記のフォント形式ファイルをダウンロードする必要があります。 ！ ！