@font-faceとfont-displayを使用してCSSでカスタムフォントを定義する方法
序章
@font-faceは、カスタムフォントを定義するために使用されるCSSアットルールです。 @font-faceを使用して、CSSファイルと同じサーバーでホストされているフォントファイルへのパスを指定します。 このルールはかなり前から存在していましたが、新しいプロパティfont-displayがあり、これにより新しいレベルの読み込みオプションが提供されます。
このチュートリアルでは、人気のあるオープンソースフォントであるRoboto Mono をダウンロードし、@font-faceを使用してサンプルWebページにフォントをロードします。 最高のユーザーエクスペリエンスを作成するために、font-displayプロパティを使用して、ロードする方法とタイミングをカスタマイズします。
前提条件
nanoやVisualStudioCodeなどの任意のコードエディター- Webブラウザ
- HTMLの基礎に慣れている。 チュートリアルシリーズHTMLを使用してWebサイトを構築する方法の概要をご覧ください。
ステップ1—フォントのダウンロードとWebページの構築
@font-faceルールの調査を開始する前に、サンプルのWebページとディレクトリを設定しましょう。
作業ディレクトリから、Webサイト用の新しいフォルダとフォントファイル用のサブディレクトリを作成します。
mkdir -p ./website/fonts/
新しいプロジェクトのルートディレクトリwebsiteに移動します。
cd website
ここから残りのすべてのコマンドを実行します。
次に、curlコマンドを使用してRobotoMonoフォントをダウンロードします。 google-webfonts-helper という人気のアプリを使用しています。これにより、Googleのコンテンツ配信ネットワークから複数のフォントを1つのきちんとバンドルされたGETリクエストで直接ダウンロードできます。
RobotoMonoの2つの異なるスタイルとウェイトregularと700italicをダウンロードしましょう。
curl -o ./fonts/fontfiles.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto-mono?download=zip&subsets=latin,latin-ext&variants=regular,700italic&formats=woff,woff2,ttf"
RobotoMonoフォントファミリーから必要なvariantsを指定していることに注意してください。 次に、それぞれに必要なformatsを指定します。 ttf、woff、woff2のフォーマットをリクエストしています。 woff2形式は最新のWebフォント形式ですが、一部のブラウザーではwoff2のサポートがまだ不足しています。 そのため、InternetExplorer9へのをサポートするwoff形式のフォールバックとTrueType形式またはttfも提供しています。 これにより優れたカバレッジが得られますが、CSSを作成するときに、標準フォントを使用してより多くのフォールバックオプションを提供します。 font-displayプロパティは、さまざまなユーザーのフォントの読み込み方法を管理するのにも役立ちます。
次に、ダウンロードしたコンテンツを./fontsフォルダーに解凍します。 LinuxおよびmacOSを実行しているマシンでは、次のコマンドを使用します。
unzip ./fonts/fontfiles.zip -d ./fonts
./fontsフォルダーの内容を調べます。
ls ./fonts
フォントごとに.ttf、.woff、.woff2ファイルの6つの新しいファイルが見つかりました。
フォントをダウンロードしたら、CSSを作成し、それを使用してHTML要素のスタイルを設定しましょう。
ステップ2—@font-faceルールを使用する
このステップでは、@font-faceプロパティを使用してダウンロードしたフォントを適用します。
nanoまたはお好みのテキストエディタを使用して、style.cssというファイルを作成して開きます。
nano style.css
次のコンテンツを追加します。これにより、ファイルへのパスを使用して@font-faceルールが定義されます。
style.css
@font-face {
font-family: 'Roboto Mono', monospace;
src: url(fonts/roboto-mono-v12-latin-regular.woff2) format('woff2'),
url(fonts/roboto-mono-v12-latin-regular.woff) format('woff'),
url(fonts/roboto-mono-v12-latin-regular.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto Mono', monospace;
src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format('woff2'),
url(fonts/roboto-mono-v12-latin-700italic.woff) format('woff'),
url(fonts/roboto-mono-v12-latin-700italic.ttf) format('truetype');
font-weight: 700;
font-style: italic;
}
h1, p {
font-family: 'Roboto Mono', monospace;
}
h1 {
font-family: 'Roboto Mono', monospace;
font-weight: 700;
font-style: italic;
}
このコードをブロックごとに調べてみましょう。
常にメインCSSファイルで最初に@font-faceat-rulesを定義してください。 @font-faceルールの最も基本的なバージョンには、font-familyおよびsrcプロパティが必要です。 最初のブロックでは、font-familyの値としてRoboto Monoを提供し、srcの3つのファイルへのパスをそれぞれ異なる形式で降順で提供します。優先度。
2番目のブロックでは、同じfont-family値を提供しますが、700italicバージョンのRobotoMonoへのパスを使用します。 次に、font-weightとfont-styleの2つのプロパティを定義します。 これらのプロパティを使用して、この2番目のバージョンのRobotoMonoを使用する場所を定義します。
次の2つのブロックでは、<h1>要素と<p>要素のカスタムスタイルを定義しています。 font-familyを使用して両方を定義し、font-weightとfont-styleを<h1>に固有のブロックに追加する方法に注意してください。 これにより、H1の見出しがRobotoMonoregularではなくRobotoMono700italicにレンダリングされます。
ファイルを保存して閉じます。
次に、いくつかの<h1>タグと<p>タグを使用して小さなHTMLページを作成しましょう。
index.htmlという名前の新しいファイルを作成して開きます。
nano index.html
次のコードを追加します。これにより、見出しとテキスト行が定義されます。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS @font-face</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1> Roboto Mono font, 700italic </h1> <p> Roboto Mono font, regular </p> </body> </html>
ファイルを保存して閉じます。
index.htmlをWebブラウザにロードします。 見出しはRobotoMono700italicでレンダリングされ、段落テキストはRoboto Monoregularで次のようにレンダリングされます。
Roboto Monoフォント、700イタリック
Roboto Monoフォント、通常
@font-faceプロパティが機能しているので、font-displayを使用して、フォントをロードする方法とタイミングを構成しましょう。
ステップ3—font-displayを使用してフォントの読み込みを制御する
font-displayを使用すると、フォントの読み込み方法を正確に制御できます。 これにより、カスタムフォントを使用する際のユーザーエクスペリエンスを大幅に向上させることができます。
カスタムフォントを使用している場合、ページが最初に読み込まれたときに、ユーザーはFOUT（スタイル設定されていないテキストのフラッシュ）またはFOIT（非表示のテキストのフラッシュ）のいずれかに遭遇することがあります。 一部のブラウザは、カスタムフォントがロードされていない場合でも、テキストをすぐに表示することを選択します。 完全に読み込まれると、ブラウザはカスタムフォントに戻りますが、これによりFOUTが作成されます。 他のブラウザは、カスタムフォントが読み込まれるまでテキストを短時間非表示にし、FOITを引き起こします。 時間枠内にフォントが読み込まれない場合、ブラウザはフォールバックフォントを使用します。
FOUTに対処する1つの方法は、 Font Style Matcher などのツールを使用して、フォントの変更がそれほど大幅に感じられないように、カスタムフォントにできるだけ近いフォールバックフォントを見つけることです。 ただし、font-displayプロパティを使用して、これらの問題をよりエレガントに処理できます。
読み込みの問題に対処するために、font-displayは次の5つの値のいずれかを取ります。
auto：これはブラウザのデフォルトの動作を使用しますが、これは異なります。block：テキストは最初は短時間非表示になりますが、使用可能になるとカスタムフォントに変更されます。 この1つの値は、無限スワップ期間を持っていると言われます。swap：テキストが非表示になることはなく、使用可能になるとカスタムフォントに変更されます。 これにより、スワップ期間が無限になります。fallback：テキストが非常に短い期間（ブロック期間）非表示になり、その後、短いスワップ期間があります。 カスタムフォントがスワップ期間内にロードされない場合、それはまったくロードされません。optional：テキストの読み込みに非常に短いブロック期間（〜100ms）が与えられます。 そのブロック期間中にフォントが読み込まれない場合は、フォールバックフォントが使用され、カスタムフォントはまったく読み込まれません。 ただし、フォントは引き続きダウンロードされ、バックグラウンドでキャッシュされます。 これは、後続のページの読み込み時に、カスタムフォントがキャッシュで使用可能になり、すぐに読み込まれることを意味します。
font-displayのoptional値は、多くのフォント読み込み状況に対する堅牢なソリューションを提供します。 それを私たち自身のCSSに追加しましょう。
style.cssを再度開きます：
nano style.css
次に、強調表示されたコードを追加します。
style.css
@font-face {
font-family: 'Roboto Mono', monospace;
src: url(fonts/roboto-mono-v12-latin-regular.woff2) format('woff2'),
url(fonts/roboto-mono-v12-latin-regular.woff) format('woff'),
url(fonts/roboto-mono-v12-latin-regular.ttf) format('truetype');
font-display: optional;
}
@font-face {
font-family: 'Roboto Mono', monospace;
src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format('woff2'),
url(fonts/roboto-mono-v12-latin-700italic.woff) format('woff'),
url(fonts/roboto-mono-v12-latin-700italic.ttf) format('truetype');
font-weight: 700;
font-style: italic;
font-display: optional;
}
h1, p {
font-family: 'Roboto Mono', monospace;
}
h1 {
font-family: 'Roboto Mono', monospace;
font-weight: 700;
font-style: italic;
}
これで、カスタムフォントが非常に速く読み込まれるため、ユーザーがFOUTやFOITを経験することはないか、まったく読み込まれません。 ただし、更新したり、他のページにアクセスしたりすると、すぐにダウンロードして読み込まれます。
結論
このチュートリアルでは、カスタムフォントをダウンロードし、@font-faceプロパティを使用してWebページに追加しました。 次に、font-displayプロパティを使用して、カスタムフォントの読み込み方法を管理しました。 font-displayおよび関連するプロパティの詳細については、 Mozilla DeveloperNetworkの関連ドキュメントを参照することを検討してください。
