CSS3フォント
@font-face は CSS3 のモジュールです。主に獨(dú)自に定義した Web フォントを Web ページに埋め込みます。@font-face モジュールの登場(chǎng)により、Web 開(kāi)発でフォントの使用について心配する必要がなくなりました。 Web セーフ フォントのみを使用する必要はありません。 IE はそのようなことをサポートできるのかと疑問(wèn)に思う人もいるでしょう。 @font-face 関數(shù)は IE4 からサポートされていたので、きっと驚かれるでしょう。英語(yǔ)の Web サイトやブログを見(jiàn)て、ホームページ上のロゴ、タグ、ページ上の手書(shū)きの英語(yǔ)スタイルなど、美しいカスタム Web フォントを目にした場(chǎng)合、これらはすべて @font-face によって実裝されています。
まず、@font-face の文法規(guī)則を見(jiàn)てみましょう:
@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: のフォント名を設(shè)定します。テキスト。
font-style: テキストのスタイルを設(shè)定します。
font-variant: テキストが大文字か小文字かを設(shè)定します。
font-weight: テキストの太さを設(shè)定します。
font-stretch: テキストを水平方向に伸ばすかどうかを設(shè)定します。
font-size: テキストのフォントサイズを設(shè)定します。
src: カスタム フォントの相対パスまたは絶対パスを設(shè)定します。この屬性は @font-face ルールでのみ使用できることに注意してください。
ブラウザとの互換性
@font-face とのブラウザ互換性の問(wèn)題と言えば、これにはフォント形式の問(wèn)題が関係します。ブラウザによってフォント形式のサポートに一貫性がないため、これは誰(shuí)にとっても必要です。どのようなものかを調(diào)べてみましょうのフォントは、さまざまなバージョンのブラウザでサポートされています。以前、いくつかのフォント形式について簡(jiǎn)単に説明しましたが、皆さんが理解できるように、この問(wèn)題について個(gè)別に説明します。
1. TrueTpe(.ttf) 形式:
.ttfフォントは Windows および Mac で最も一般的なフォントです。RAW 形式であるため、このフォントをサポートするブラウザには [IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2] が含まれます。 +];
2. OpenType (.otf) 形式:
.otf フォントは、TrueType に基づいて構(gòu)築された獨(dú)自のフォント形式であるため、このフォントをサポートするブラウザーも提供されます。 [Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile Safari4.2+];
3. Web オープン フォント フォーマット (.woff) 形式:
フォントはWeb フォントの中で最も優(yōu)れた形式であり、オープンな TrueType/OpenType 圧縮バージョンであり、メタデータ パッケージの分離もサポートしています。 ];
4. 埋め込みオープンタイプ (.eot) 形式:
.eot フォントは、TrueType から作成できます。このフォントをサポートするブラウザは
です。 .svg ) 形式:
.svg フォントは、SVG フォント レンダリングに基づく形式です。このフォントをサポートするブラウザには、[Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+] が含まれます。
注: このセクションのブラウザ効果を?qū)g裝するには、上記のフォント形式ファイルをダウンロードする必要があります。 ！ ！
りー
