TECH I.S.

CSS Webフォント


CSS @font-faceルール

Webフォントを使用すると、Webデザイナーは、ユーザーのコンピューターにインストールされていないフォントを使用できます。

使用したいフォントを見つけて購入したら、そのフォントファイルをWebサーバーに含めるだけで、必要に応じてユーザーに自動的にダウンロードされます。

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


さまざまなフォント形式

TrueType フォント (TTF)

TrueTypeは、1980年代後半にAppleとMicrosoftによって開発されたフォント標準です。TrueTypeは、MacOSとMicrosoft Windowsオペレーティングシステムの両方で最も一般的なフォント形式です。

OpenType フォント (OTF)

OpenTypeは、スケーラブルなコンピューターフォントの形式です。TrueTypeに基づいて構築されており、Microsoftの登録商標です。OpenTypeフォントは、今日の主要なコンピュータープラットフォームで一般的に使用されています。

Web Open Font Format (WOFF)

WOFFはWebページで使用するフォント形式です。2009年に開発され、現在はW3C勧告となっています。WOFFは基本的に、圧縮と追加のメタデータを備えたOpenTypeまたはTrueTypeです。目標は、帯域幅の制約があるネットワークを介して、サーバーからクライアントへのフォント配布をサポートすることです。

Webオープンフォント形式(WOFF 2.0)

WOFF1.0より圧縮率の高いTrueType/OpenTypeフォント。

SVGフォント/形状

SVGフォントを使用すると、テキストを表示するときにSVGをグリフとして使用できます。SVG1.1仕様では、SVGドキュメント内でフォントを作成できるようにするフォントモジュールが定義されています。CSSをSVGドキュメントに適用することもでき、@font-faceルールをSVGドキュメントのテキストに適用することもできます。

埋め込み OpenType フォント (EOT)

EOTフォントは、MicrosoftがWebページの埋め込みフォントとして使用するために設計したOpenTypeフォントのコンパクトな形式です。



フォント形式のブラウザーサポート

表の数字は、フォント形式を完全にサポートする最初のブラウザバージョンを示しています。


フォント形式

TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG サポートされていません サポートされていません サポートされていません 3.2 サポートされていません
EOT 6.0 サポートされていません サポートされていません サポートされていません サポートされていません

*IE: フォント形式は、「インストール可能」に設定されている場合にのみ機能します。

必要なフォントを使用する

@font-faceルール。最初にフォントの名前(例:myFirstFont)を定義してから、フォントファイルを指定します。

ヒント:フォントURLには常に小文字を使用してください。大文字を使用すると、IEで予期しない結果が生じる可能性があります。

HTML要素のフォントを使用するには、font-familyプロパティでフォントの名前(myFirstFont)を参照します。

@font-face{  font-family: myFirstFont;  src: url(sansation_light.woff); } div{  font-family: myFirstFont; }

自分で試してみる»


太字テキストの使用

別のものを追加する必要があります@font-face太字テキストの記述子を含むルール:

@font-face{   font-family: myFirstFont;   src: url(sansation_bold.woff); font-weight: bold; }

自分で試してみる»

ファイル「sansation_bold.woff」は別のフォントファイルで、Sansationフォントのボールド文字が含まれています。

ブラウザーは、font-family "myFirstFont"のテキストを太字でレンダリングする必要がある場合は常にこれを使用します。

このような形で@font-face同じフォントのルールをたくさん持てます。


CSSフォント記述子

@font-faceルール:次の表に、内部で定義できるすべてのフォント記述子を示します。
ディスクリプタ 説明
font-family 名前 必要。フォントの名前を定義します
src URL 必要。フォントファイルのURLを定義します
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
オプション。フォントを伸ばす方法を定義します。デフォルトは "normal"
font-style normal
italic
oblique
オプション。フォントをどのようにスタイルするかを定義します。デフォルトは "normal"
font-weight normal
bold
100
200
300
400
500
600
700
800
900
オプション。フォントの太さを定義します。デフォルトは「normal」
unicode-range ユニコード範囲 オプション。フォントがサポートするUNICODE文字の範囲を定義します。 デフォルトは「U+0-10FFFF」


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細