ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS3 チュートリアル - フォント

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

黄舟
リリース: 2016-12-27 15:53:45
オリジナル
1681 人が閲覧しました

フロントエンド プログラマーの皆さん、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: カスタムフォントの相対パスまたは絶対パスを設定します。

ブラウザのサポート:

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

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) に注目してください。


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート