CSS3 チュートリアル - フォント

フロントエンド プログラマーの皆さん、CSS3 チュートリアル-@font-face を使用してパーソナライズされたフォントを実装することについてどのくらい知っていますか?今日は CSS3 @font-face を紹介しますので、興味があれば学習してください。

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

CSS3 @font-face ルール:

CSS3 が登場する前は、Web デザイナーはユーザーのコンピューターに既にインストールされているフォントを使用する必要がありました。

CSS3 を使用すると、Web デザイナーは好きなフォントを使用できます。

使用したいフォントを見つけたり購入したりしたら、フォント ファイルを Web サーバーに保存すると、必要なときにユーザーのコンピュータに自動的にダウンロードされます。

「独自の」フォントは CSS3 @font-face ルールで定義されます。

@font-face は次の属性をサポートします:

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

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

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

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

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

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

src: カスタムフォントの相対パスまたは絶対パスを設定します。

ブラウザのサポート:

Firefox、Chrome、Safari、Opera は、.ttf (True Type フォント) および .otf (OpenType フォント) タイプのフォントをサポートします。

Internet Explorer 9 以降は、新しい @font-face ルールをサポートしていますが、.eot タイプのフォント (埋め込み OpenType) のみをサポートしています。

注: Internet Explorer 8 以前は、新しい @font-face ルールをサポートしていません。

必要なフォントを使用します:

新しい @font-face ルールでは、最初にフォントの名前 (myFirstFont など) を定義してから、フォント ファイルを指定する必要があります。

HTML 要素にフォントを使用するには、font-family 属性を介してフォントの名前 (myFirstFont) を参照します:

例:

<style>
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf’),
url(‘Sansation_Light.eot’); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>

太字フォントを使用します:

太字テキストを含む別の説明を追加する必要がありますシンボルの @font-face:

例:

@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Bold.ttf’),
url(‘Sansation_Bold.eot’); /* IE9+ */
font-weight:bold;
}

ファイル「Sansation_Bold.ttf」は、Sansation フォントの太字文字を含む別のフォント ファイルです。

フォントファミリー「myFirstFont」のテキストを太字で表示する必要がある限り、ブラウザはこのフォントを使用します。

このようにして、同じフォントに対して多くの @font-face ルールを設定できます。

CSS3 フォント記述子:

次の表は、@font-face ルールで定義できるすべてのフォント記述子を示しています:

descriptor	value	description
font-family	name	必須。フォントの名前を指定します。
src	URL	は必須です。フォントファイルのURLを定義します。
フォントストレッチ	標準 凝縮 超凝縮 超凝縮 半凝縮 エキスパンド セミエキスパンド 超拡張 超拡張	オプション。フォントを伸ばす方法を定義します。デフォルトは「通常」です。
フォントスタイル	普通 斜体 斜体	オプション。フォントのスタイルを定義します。デフォルトは「通常」です。
フォントの太さ	普通 太字 100 200 300 400 500 600 700 800 900	オプション。フォントの太さを定義します。デフォルトは「通常」です。
unicode-range	unicode-range	オプション。フォントがサポートする UNICODE 文字の範囲を定義します。デフォルトは「U+0-10FFFF」です。

上記は CSS3 チュートリアル フォントの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。