カラフルな CSS3 パーソナライズされたフォント

ページを作成するとき、「font-family」を使用してフォントを定義することがよくありますが、「font-family」を使用して定義したフォントがユーザーのブラウザで表示できるかどうかは、ユーザーのコンピュータに定義したフォントがあるかどうかによって決まります。フォントがインストールされています。インターネット上では、海外の Web サイトで珍しい美しいフォントが使用されていることがよくありますが、これらのフォントはユーザーのコンピュータにインストールされていないことが多いので、今回はそのフォントをページ上で使用する方法を紹介します。ユーザーのコンピュータ。

css3 @font-face

@font-face が CSS3 の新しい属性であると言うのは実際には不正確です。この機能はすでに CSS2 でサポートされており、IE5 もすでにサポートを開始していますが、この機能は CSS3 で実装されています。 IE 残念ながら、他のブラウザはこの形式をサポートしていません。

Web ページでは、CSS の font-family 属性を使用してフォントを定義できますが、定義されたフォントがユーザーのコンピューターで正しく表示されるかどうかは、ユーザーのコンピューターにフォントがインストールされているかどうかによって異なります。海外の個人 Web サイトでは非常に美しいフォントが使用されているのをよく見かけますが、これらのフォントは通常ユーザーのコンピュータにインストールされていないため、font-family 属性を使用して実現することはできません。今日は @font-face 実装のパーソナライズされた使用方法を紹介します。フォント。

CSS3 @font-face

@font-face が CSS3 の新機能であると言うのは正確ではありません。CSS2 はすでにこの機能をサポートしており、Internet Explorer はバージョン 5 の時点でサポートしているからです。 IE は独自の eot (Embeded Open Type) フォント形式を通じてこれを実装しており、他のブラウザはこの形式をサポートしていません。 @font-face は以下の属性をサポートしています:

font-family: テキストのフォント名を設定します。
font-style: テキストのスタイルを設定します。
font-variant: テキストを大文字にするか小文字にするかを設定します。
font-weight: テキストの太さを設定します。
font-stretch: テキストを横方向に伸ばすかどうかを設定します。
font-size: テキストのフォントサイズを設定します。
Src: カスタムフォントの相対パスまたは絶対パスを設定します。
@font-face ブラウザの互換性は次のとおりです:

簡単な例

まず、ChantelliAntiqua Regular という名前のフォントを宣言します。次のような古い書き方があります:

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
    src: local("☺"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg");
    font-weight: normal;
    font-style: normal;
}

First The最初の src は IE と互換性があり、2 番目の src は他のブラウザーと互換性があります。 local("☺") は、クライアントからのフォントの読み込みを回避するためのハック書き込みメソッドです。この書き込みメソッドには Android システムのバグがあります。改善案は、次のように 2 つの @font-face を宣言することです。まず、eot フォント ファイルを参照する @font-face を宣言して、IE で適切に動作するようにします。2 番目の @font-face は、他のブラウザとの互換性を保つために複数のフォント形式を参照します。それらは見つかるまで順番に検索されます。サポートされている形式。つまり、同じフォントを複数の形式で使用できる必要があります。 url(//:) format("no404") は防弾の書き込みメソッドです。

その他のHTMLとCSSコードは次のとおりです:

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
}
 
@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url(//:) format("no404"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontMFqI76bT") format("svg");
    font-weight: normal;
    font-style: normal;
}

最も重要な効果は次のとおりです:

フリーフォントサイトFont Squirrel

Font Squirrelは非常に優れたフリーフォントリソースのウェブサイトです。 Web デザイナーは高品質のフォントを無料でダウンロードできます。フォント ファイルをアップロードすると、複数のフォント形式と CSS コードを生成できる、非常に便利なフォント形式生成ツールもあります。素晴らしい無料の英語フォントが必要な場合は、ここが最適です。

カラフルなページが必要な場合は、より多くのフォント スタイルが必要です。@font-face ソリューションに加えて、sIFR、Cufon、Typeface.js などもあります。 Webfont と同様に、簡単に言えば、.webfont にはフォントにアクセス許可テーブルが埋め込まれており、ブラウザはその許可情報を読み取り、フォントをダウンロードして表示するかどうかを決定できます。さらに、フォントをサードパーティのサーバー上に配置して呼び出しを行う Typekit も注目に値するソリューションです。これらのソリューションの長所と短所については、後で詳しく紹介します。

以上がカラフルな CSS3 パーソナライズされたフォントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。