序章
ウェブサイトの視覚的アイデンティティは、主に色と書体という2つのデザイン原則によって決定されます。 過去10年間で、デバイスにプリロードされたフォントをより多く使用するカスタムフォントをユーザーに提供することに大きな進歩があり、カスタムフォントをロードする機能があります。 @font-face ルール、およびフォントホスティングサービスの使用。 Webブラウザーは、可変フォントのサポートも実装しています。これは、複数のフォントを補間できる単一のフォントファイルであり、高度な調整とフォントのカスタマイズを提供します。
このチュートリアルでは、Webサイトにフォントをロードする例を試してみます。 ユーザーのデバイスにインストールされている可能性のあるフォントを使用するには、フォントスタックを使用します。これは、可用性に基づくフォントのランク付けです。 次に、フォントホスティングサービス Google Fonts を使用して、カスタムフォントを検索、選択、およびページにロードします。 最後に、を使用してセルフホストフォントファミリをロードします @font-face ルールの後に、自己ホスト型の可変フォントが続きます。
前提条件
- カスケードと特異性を使用してCSSスタイルをHTMLに適用する方法を読むことで得られるCSSのカスケードと特異性の機能の理解。
- タイプセレクター、コンビネーターセレクター、セレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
- CSSのフォントスタックとフォントプロパティの理解。これは、チュートリアル CSS でフォント、サイズ、および色を使用してテキスト要素のスタイルを設定する方法にあります。
- ローカルマシンに次のように保存された空のHTMLファイル
index.html選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズを使用してWebサイトを構築する方法全体を試してください。
HTMLの設定と初期フォントスタックの作成
フォントスタックの概念は、大多数のコンピューターにインストールできる信頼できるフォントがほんのわずかしかなかったWebの初期に由来します。 多くの場合、フォントが使用できない可能性が高いため、フォントスタックは、ブラウザが検索してロードしようとするフォントの順序を提供していました。 このセクションでは、復元力のあるフォントスタックの原理と、最新のデバイスでフォントに使用できるオプションについて学習します。 ただし、最初に、フォントを示すためのサンプルHTMLを作成します。
開くことから始めます index.html テキストエディタで。 次に、次のHTMLをファイルに追加します。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Demo Font Family Page</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
内部 <head> タグ、最初 <meta> タグは、HTMLファイルの文字セットを定義します。 二番目 <meta> タグは、モバイルデバイスがページをレンダリングする方法を定義します。 次に、 <title> タグはページにタイトルを付けます。 最後に、 <link> タグは、後でページのスタイルを作成するために使用するCSSファイルを参照します。
次に、 <body> タグを付けて、ページのコンテンツを追加します。 このコンテンツは、 Cupcake Ipsum のフィラーコンテンツと呼ばれ、実際には何も言わずにコンテンツのように見えるテキストを提供します。 フィラーの内容は、次のコードブロックで強調表示されています。 コードが追加および変更されると、チュートリアル全体でこの強調表示方法に遭遇します。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Demo Font Family Page</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<main>
<header>
<div class="content-width">
<h1>Sweet strawberry cheesecake</h1>
<p><em>Sweet muffin bear claw</em> donut chupa chups liquorice tiramisu candy canes sweet.</p>
</div>
</header>
<div class="content-width">
<p>Chocolate shortbread caramels tootsie roll tiramisu sweet dessert apple pie fruitcake. <strong>Croissant icing chupa chups</strong> sweet roll cake tart fruitcake soufflé jujubes. Shortbread brownie tootsie roll ice cream pudding dessert marshmallow sesame snaps. Cake pie jujubes lemon drops sesame snaps soufflé cookie jujubes wafer. Caramels ice cream fruitcake pastry cheesecake chocolate tootsie roll cake marshmallow. Pie candy canes cupcake dragée bonbon fruitcake marzipan. Tootsie roll halvah bonbon cake muffin gummies. Bonbon cotton candy marzipan cake sesame snaps chupa chups donut dessert. Macaroon gummies macaroon biscuit chocolate carrot cake gummi bears.</p>
<h2>Donut candy canes cotton candy</h2>
<p><strong><em>Liquorice gingerbread tiramisu</em></strong> pie bonbon soufflé. Jujubes tootsie roll muffin gingerbread powder. Carrot cake halvah chocolate bar tart sugar plum sugar plum pastry. Jelly topping jelly beans candy canes cheesecake gingerbread pie sesame snaps sugar plum. Pie cheesecake pudding jelly brownie jelly beans halvah. Ice cream powder carrot cake bear claw cake cheesecake.</p>
<p><em>Jelly-o jelly-o jelly</em> lollipop croissant. Carrot cake tart danish macaroon dragée gingerbread. Sugar plum cotton candy biscuit <strong>fruitcake powder liquorice</strong>. Shortbread candy pie tart pudding. Sesame snaps bear claw tart tiramisu donut chocolate cake. Cheesecake tiramisu chocolate cake dessert dessert candy candy canes apple pie marshmallow. Sweet croissant pudding toffee tootsie roll gummies tart pastry pie. Candy apple pie cake wafer tootsie roll tart icing halvah.</p>
<h3>Gingerbread gummi bears</h3>
<p><em>Tiramisu sweet pastry</em> danish topping ice cream caramels. Tiramisu candy liquorice jelly-o marzipan candy canes cupcake topping. Gummi bears jujubes carrot cake shortbread sesame snaps marshmallow danish pudding cotton candy. <strong>Cake jujubes biscuit</strong> topping marzipan sweet roll apple pie bonbon. Bear claw donut bear claw bonbon caramels halvah gummi bears. Gummi bears apple pie jelly-o donut sesame snaps icing marzipan.</p>
<p><strong><em>Bonbon chupa chups</em></strong> donut dessert pudding. Sweet roll caramels dessert muffin croissant. Powder chocolate lollipop ice cream bonbon pie candy muffin cotton candy. Fruitcake topping chupa chups toffee jelly-o halvah. Candy soufflé toffee gummies fruitcake oat cake chocolate cake. Dessert cupcake cheesecake sweet roll bear claw. Marshmallow halvah bear claw biscuit dragée marzipan lemon drops jelly.</p>
</div>
</main>
</body>
</html>
フィラーコンテンツには、さまざまなフォントスタイルを提供するために使用されるいくつかの要素が含まれています。 The <strong> タグはデフォルトでそのコンテンツを太字にします <em> タグはコンテンツをイタリック体にし、見出しタグはフォントサイズを大きくしてコンテンツを太字にします。
次に、テキストエディタに戻り、 styles.css 同じフォルダ内のファイル index.html. これは、で参照したファイルです。 <head> の要素 index.html. の中に styles.css ファイルに、次のコードを追加します。
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
}
.content-width {
max-width: 70ch;
width: calc(100% - 4rem);
margin: 0 auto;
}
main {
margin-bottom: 4rem;
}
header {
margin-bottom: 4rem;
padding: 2rem 0;
background-color: hsl(280, 50%, 40%);
border-bottom: 4px solid hsl(300, 50%, 50%);
color: hsl(300, 50%, 90%);
}
header p {
color: hsl(300, 50%, 85%);
}
h1, h2, h3 {
margin: 0;
line-height: 1.25;
}
h2, h3 {
color: hsl(280, 50%, 40%)
}
これらのスタイルは、ページの全体的な視覚スタイルを作成します。 The header 紫色の背景があります h1 と p 中は薄紫です。 The main と .content-width セレクターはページのレイアウトを作成し、 body 見出しセレクターは、を設定することにより、いくつかの活版印刷スタイルを提供します line-height, color、 と margin 値。
変更をに保存します styles.css、次にWebブラウザを開きます。 開ける index.html ブラウザでファイルをブラウザウィンドウにドラッグするか、ブラウザのファイルを開くオプションを使用します。 ブラウザはHTMLおよびCSSコードをレンダリングして、次の画像のようなページを生成します。
のテキスト index.html ブラウザのファイルは、ブラウザのローカルデフォルトフォントを使用します。 ほとんどの場合、これは Times NewRomanのようなセリフフォントになります。 フォントをカスタマイズする最もパフォーマンスの高い方法は、エンドユーザーのコンピューターに既にあるフォントを使用することです。 ローカルフォントを使用すると、ブラウザはサイズの大きいファイルをダウンロードして処理する必要がなくなります。
今日では、多くの場合、数十のローカルフォントから選択できます。 これらはシステムフォントとして知られています。 MicrosoftとAppleはどちらも、システムに付属しているフォントの最新リストを保持しています。
プリインストールされているシステムフォントの使用を開始するには、に戻ります。 styles.css テキストエディタで。 の中に body セレクター、追加 font-family プロパティを指定し、その値をフォントスタックと呼ばれるフォントのコンマ区切りリストにします。
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: "PT Sans", Calibri, Tahoma, sans-serif;
}
...
ブラウザは、成功するまで、フォントスタックにローカルフォントを順番にロードしようとします。 このフォントスタックの場合、最初に試行されるフォントは "PT Sans"、これは複数単語のフォント名であるため、引用符で囲まれています。 PT Sansは、 ParaType のフォントで、Appleオペレーティングシステムにプリインストールされており、 GoogleFontsから無料で入手できます。 次のフォントは Calibri、その後に別のコンマと Tahoma. Calibri は、最近のバージョンのWindowsにインストールされているMicrosoftのフォントであり、 Tahoma は、Appleオペレーティングシステムに10年以上存在しているMicrosoftの別のフォントです。
最終的なフォントは、一般的な名前間隔の値です sans-serif. 前の3つのフォントのいずれも使用できない場合、ブラウザはブラウザのデフォルトを使用します sans-serif HelveticaやArialなどのフォント。
変更をに保存します styles.css その後、更新します index.html ブラウザで。 オペレーティングシステムとインストールされているフォントによって、レンダリングされるフォントとそのレンダリング方法が決まります。 次の画像は、macOSのFirefoxにロードされたときにPTSansがフォントとしてどのように表示されるかを示しています。
フォントファミリーは、特定のフォントのすべての太さとスタイルのバリエーションで構成されています。 ファミリには、フォントの表示の細さ、太さ、傾斜の程度を変更する多くの追加の太さやスタイルを含めることができます。
The font-style プロパティは、フォントの傾きを決定します。 値は最も一般的です italic; ただし、一部のフォントは oblique value。傾斜の急勾配を示すオプションの度の値を受け入れます。
The font-weight プロパティには、次の2つの定義済みの名前付き値があります。 normal と bold、ただし、この値を決定するための最も用途が広く予測可能な方法は、重み数を使用することです。 ウェイト番号の値は通常、100から900まで100の増分で定義され、100は薄いウェイト、900は厚いウェイトです。 ブラウザが指定された太さに対応するフォントを見つけられない場合、ブラウザは利用可能な最も近いサイズを見つけます。
チュートリアル全体でこのページの新しいベースフォントスタイルを設定するには、に戻ります。 styles.css テキストエディタで。 次に、それぞれの要素セレクターを作成します h1, h2, h3、 と p 要素。 各セレクター内に、次のコードブロックから強調表示されたCSSを追加して、フォントサイズを大きくし、見出しを強調します。
...
h2, h3 {
color: hsl(280, 50%, 40%)
}
h1 {
font-size: 3rem;
font-weight: 100;
}
h2 {
font-size: 2rem;
font-weight: 200;
}
h3 {
font-size: 1.75rem;
font-style: italic;
font-weight: 200;
}
p {
font-size: 1.125rem;
}
The h1 ここではに設定されています font-size の 3rem、これは 48px、薄い font-weight の 100. そうして h2 に設定されています 2rem、 に相当 32px、および font-weight の 200. 次に、 h3 同じに設定されています font-weight 少し小さめ font-size として h2、しかし追加されます font-style プロパティをに設定 italic. 最後に、 p エレメントセレクターが標準を引き上げる font-size に 1.125rem、これは 18px この場合。 このテキストの全体的なスタイルの調整は、各セクションで使用されているフォントを変更しても同じです。
変更をに保存します styles.css、次にブラウザに戻って更新します index.html. 全体的なテキストサイズが大きくなり、見出しのスタイルが互いに区別されるようになりました。 次の画像は、これがブラウザにどのように表示されるかを示しています。
このセクションでは、フォントスタックを使用して、ランク付けされた順序でページに一連の可能なフォントをロードしました。 また、フォントファミリの可能なバリエーションについても学びました。 font-weight と font-style プロパティ。 次のセクションでは、フォントホスティングサービスのフォントを使用します。
ホストされたサービスからのフォントファイルの検索とロード
ホスト型フォントサービスは、カスタムフォントを検索してWebサイトに提供するための一般的で効果的な方法です。 Google Fonts 、 Adobe Fonts （以前のTypekit）、 Typography.com などのサービスは、クライアントが一時的にダウンロードする高品質フォントの大規模なライブラリを提供しますページを表示するとき。 これは、クライアントのシステムにどのフォントがあるかを心配する必要がなくなったことを意味します。
各フォントホスティングサービスには、フォントをロードするための独自のプロセスがあり、多くの場合、関連するコストがあります。 このセクションでは、オープンソースおよび限定ライセンスのフォントを無料でホストしているため、Googleのサービスからフォントを見つけてロードします。
まず、fonts.google.comを開きます。 ページ上部の検索バーを使用して、「OpenSans」という名前のフォントを検索します。 検索結果には、一致する用語が一覧表示されます。これは、 Google FontsOpenSansページへのリンクです。 このページには、いくつかのフォントスタイルのリストがあります。 これらのフォントの太さとスタイルの組み合わせはそれぞれ、ブラウザがダウンロードする一意のフォントファイルです。
注：それぞれ font-weight と font-style すべてを選択するのではなく、必要に応じて選択する必要があります。 選択するフォントが多いほど、ダウンロードする必要のあるフォントが増えるため、Webサイトの読み込み時間が長くなります。 デザインで使用されているフォントの太さとスタイルのみをロードすることが重要です。
このデザインでは、 Light 300 、 Light 300 italic 、 Regular 400 、 Regular 400 italic 、 Bold700を選択します。 ]、および太字の700イタリック。 次の画像は、この選択がGoogleFontsでどのように表示されるかを示しています。
次に、 <link> GoogleFontsサービスからファイルをロードするために必要なタグ。 これを行うには、 の代わりにオプション @輸入 GoogleFontsインターフェースでファイルをロードする方法としてのオプション。 一連のコピー <link> 提示されたタグ。 次に、に戻ります index.html テキストエディタで。 中に入る <head> 要素と、後 <link> タグの読み込み styles.css、貼り付けます <link> GoogleFontsのタグ。 次のコードブロックで強調表示されているHTMLは、コピーされたコードを追加する場所を示しています。
<!doctype html>
<html>
<head>
...
<link href="styles.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
...
</body>
</html>
最初の二つ <link> 要素は、 preconnect と呼ばれるタスクを実行します。これは、外部Web接続を優先するようにブラウザーに指示します。 順番に、これらの2つ <link> 要素は、3番目からCSSファイルとフォントファイルをロードするようにブラウザを準備します <link> できるだけ早く。
ブラウザがフォントをページにロードする準備ができたので、次にフォントスタイルを適用して、テキストがそのフォントでレンダリングされるようにする必要があります。
変更をに保存します index.html、次に戻る styles.css テキストエディタで。 あなたの中で body セレクター、に移動します font-family 財産。 値の前にフォント名を付けます "Open Sans" 前の引用符で "PT Sans" フォントの後にコンマが続きます。 次のコードブロックで強調表示されているCSSは、新しいフォントがフォントスタックのどこに配置されているかを示しています。
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: "Open Sans", "PT Sans", Calibri, Tahoma, sans-serif;
}
...
フォントスタックの先頭にOpenSansを追加すると、ブラウザがGoogleからファイルを読み込めない場合に、ブラウザは次に使用可能なローカルフォントにフォールバックします。 スタック内の最後のフォントがである状態で、常に少なくとも2つのフォントスタックを持つことが重要です。 sans-serif, serif, monospace、または目的のフォントに最も効果的に似ている別の名前付き値。
変更をに保存します styles.css 開いて index.html Webブラウザで。 ページ上のテキストは、GoogleFontsからロードされたOpenSansフォントを使用してレンダリングされます。 とのテキスト font-weight に設定 100 と 200 代わりに使用します 300 それが利用可能な最も近いので。 次の画像は、これがブラウザにどのように表示されるかを示しています。
このセクションでは、GoogleFontsからフォントファミリーをロードしました。 各フォントの太さとスタイルがサービスから読み込まれる異なるファイルであり、読み込まれるバリエーションの数がサイトのパフォーマンスに影響を与える可能性があることを学びました。 次のセクションでは、独自のフォントを作成してフォントをロードします @font-face セルフホストフォントファイルを設定するルール。
でセルフホストフォントをロードする @font-face
セルフホストフォントは、HTMLファイルやCSSファイルなどの他のWebコンポーネントと一緒にサーバーに保存されるフォントファイルです。 フォントファイルのセルフホスティングを検討する一般的な理由は、ホスティングサービスによって提供されていないフォントを使用する場合です。 セルフホスティングの場合、フォントの相互関係とフォントの名前をより細かく制御できます。これは、フォントの定義を介して設定できます。 @font-face ルール。 このセクションでは、あなたはあなた自身を書くでしょう @font-face ルールを設定し、フォントのファミリーをWebページにロードします。
このセクションでは、オープンソースフォントを含むサンプルzipファイルをダウンロードする必要があります。 これはブラウザからダウンロードするか、以下を使用できます curl 指図：
- curl -sL https://assets.digitalocean.com/articles/68060/fonts.zip -o fonts.zip
ファイルをダウンロードしたら、 fonts zipファイルに含まれているディレクトリと同じディレクトリに配置します index.html と styles.css コンピューター上のファイル。 Linuxでは、次のコマンドラインからこれを行うことができます。 unzip 指図：
- unzip fonts.zip
次に、開きます index.html テキストエディタで。 zipファイルからローカルフォントをロードするので、Googleフォントコードを削除できます。 このセクションでは、既存のフォントファイルからフォントファイルをロードします styles.css ファイル。 あなたの内容を確認してください <head> 要素は次のコードブロックのように設定されます。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Demo Font Family Page</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
...
</body>
</html>
編集内容をに保存します index.html、次に開きます styles.css テキストエディタで。
あなたは使用することができます @font-face Webページにカスタムフォントをロードするルール。 カスタムフォントの読み込みの歴史は、最も多くのブラウザをサポートするための複合的な方法につながりました。 他のat-rulesとは異なり、 @media また @supports、 @font-face ルールには追加の引数はありません。 ルールブロック内では、設定された数のプロパティのみが受け入れられます。 最も重要なのは font-family、ブラウザが適切なフォントファイルを参照およびロードするために使用する名前を記述します。 そうして src プロパティは、フォントファイルの場所を参照します。 バージョン9より前のバージョンのInternetExplorer をサポートするために、2つ src プロパティが必要であり、最初のプロパティは .eot フォントファイル形式。 二番目 src プロパティは、フォントファイル形式のコンマ区切りのリストになります。 ブラウザのバージョンは、サポートする適切な形式を選択します。
使用を開始するには @font-face ルール、開く styles.css テキストエディタで。 ファイルの先頭、前 body セレクター、以下を作成します @font-face ルール：
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Regular.eot');
src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
}
body {
...
}
...
このルールの中に、 font-family の値を持つプロパティ "Fira Sans" 引用符で囲みます。 このコードは全体を定義しているので font-family、1つのフォント名のみを使用する必要があります。 のフォント形式のコンマ区切りリスト src 2つの部分に分かれています。 最初は url() それは、 background-image プロパティは、サーバー上のファイル形式へのパスを提供します。 そうして format() 参照されているファイルのタイプを説明し、ブラウザがサポートされている形式を選択できるようにします。
The fira 内のフォルダ fonts フォルダには、FiraSansフォントの特定のファイル形式の4つのフォルダが含まれています。 EOT は、Encapsulated OpenTypeの略で、MicrosoftがInternetExplorer用にカスタムフォントをロードするために開発した形式です。 TTFはTrueTypeFontの略で、元々Web用に開発されたものではない古いフォント形式です。 WOFFおよびWOFF2形式は、Web Open Font Formatの略で、「2」は形式の2番目のバージョンを示します。 最新のブラウザの大部分は、TTF、WOFF、およびWOFF2を同等にサポートしています。 を作成するには @font-face 最も可能性のあるブラウザ形式をカバーするルールでは、フォントに複数のソースを提供しました。 EOTは両方で参照されます src Internet Explorerのバージョン9以降では、代わりにコンマ区切り形式が使用されるため、プロパティ。
今、あなたは @font-face 作成されたフィラサンセリフのルールは、 font-family のプロパティ body セレクタ。 の値で font-family、 交換 "Open Sans" と "Fira Sans" ページでセルフホストフォントを使用します。 次のコードブロックの強調表示された部分は、この変更を示しています。
@font-face {
...
}
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: "Fira Sans", "PT Sans", Calibri, Tahoma, sans-serif;
}
...
フォントがと同じ場所からロードされている場合でも styles.css と index.html ファイルの場合、代替のフォントスタックを保持することが重要です。 セルフホストフォントが読み込まれない理由は不明です。ブラウザで問題が発生した場合は、十分なバックアップをとることで、サイトの美観を維持できます。
変更をに保存します styles.css 開いて index.html Webブラウザで。 フォントの太字と斜体のバージョンが正しく表示されないことに注意してください。 これは、 @font-face 通常のフォントの太さとスタイルファイルのみがロードされ、使用されました。 ブラウザが太字または斜体のスタイルをフォントに適用する必要があるが、適切なフォントファイルがない場合、ブラウザは必要なバリエーションを作成します。 この変更されたフォントの形式は、フェイクボールドおよびフェイクイタリックとして知られています。 フェイクボールドは、フォントにストロークを追加することで作成されます。これにより、意図したレイアウトに干渉する可能性のある文字間の間隔が広くなることがよくあります。 偽のイタリックは、フォントを斜めにすることで作成されます。フォントは、実際のイタリックのようにスペースを使用しないことがよくあります。
次の画像は、偽の太字、斜体、および太字の斜体スタイルがブラウザにどのように表示されるかを示しています。
ブラウザにフォントファミリの適切なバリエーションを提供するには、詳細を @font-face ルールを作成し、追加のバリエーションファイルをロードするためにさらにルールを作成する必要があります。
戻る styles.css テキストエディタで。 の中に @font-face ルール、追加 font-weight と font-style 2番目以降のプロパティ src 財産：
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Regular.eot');
src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
...
ここでは、両方のプロパティの値を次のように設定します normal. のために font-weight、 normal 値はと同等です 400 数値の重み値。 これらのプロパティは、通常のバリエーションにこれらのフォントファイルを適用するようにブラウザに指示します。 したがって、 FiraSans-Regular フォントファイルは、テキストを通常の太さとスタイルにする必要がある場合に使用されます。
次に、フェイクボールドとフェイクイタリックを修正するために必要なバリエーションを提供するには、さらに追加します @font-face それぞれを参照するルール font-weight と font-style 組み合わせ：
/* Fira Sans Regular */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Regular.eot');
src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Italic.eot');
src: url('fonts/fira/eot/FiraSans-Italic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Italic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Italic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
/* Fira Sans Bold */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Bold.eot');
src: url('fonts/fira/eot/FiraSans-Bold.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Bold.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Bold.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-BoldItalic.eot');
src: url('fonts/fira/eot/FiraSans-BoldItalic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-BoldItalic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-BoldItalic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
...
バリエーションが追加されると、コメントを追加して、フォントの太さのグループをより簡単に識別できるようになります。 したがって、最初のコメントの上にCSSコメントを追加しました @font-face ルール。 次に、最初のルールの下に、さらに3つ作成しました @font-face フォントのイタリック、ボールド、およびボールドイタリックのバリエーションの規則。
これらの更新をあなたに保存します styles.css ファイル、次に更新 index.html ブラウザで。 これで、ブラウザは提供されているフォントファミリのすべてのバリエーションをロードしています。 次の画像は、太字、斜体、太字の斜体の偽のバージョンと実際のバージョンの違いを示しています。
真の太字はブラウザの偽の太字よりもはるかに太く、テキストは互いに接近しており、太いフォントストロークを考慮しています。 「イタリック」という単語の小文字のa文字を比較すると、真のイタリックがより顕著になります。 斜体の場合、フォントはa文字のスタイルを変更します。 さらに、真のイタリックの傾斜は、ブラウザの偽のイタリックよりも程度が低くなります。
次に、見出し要素がFira Sansのより薄いウェイトバージョンを使用しているため、ロードするフォントのバリエーションがさらにいくつかあります。
戻る styles.css テキストエディタで、さらに4つ作成します @font-face 通常版より上のルール @font-face ルール：
/* Fira Sans Thin */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Thin.eot');
src: url('fonts/fira/eot/FiraSans-Thin.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Thin.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Thin.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-ThinItalic.eot');
src: url('fonts/fira/eot/FiraSans-ThinItalic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-ThinItalic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-ThinItalic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
/* Fira Sans Light */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Light.eot');
src: url('fonts/fira/eot/FiraSans-Light.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Light.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Light.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Light.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-LightItalic.eot');
src: url('fonts/fira/eot/FiraSans-LightItalic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-LightItalic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-LightItalic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-LightItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
}
...
これらの新しいルールは、 Thin そしてその Light にマッピングされたフィラサンセリフのバリエーション 100 と 200 font-weight それぞれ値。 これらのサイズには単語の値がないため、通常の値と太字の値を変更しました font-weight それらの数値へのプロパティ。
これらの変更をに保存します styles.css、次にブラウザに戻って更新します index.html. 次の画像に示すように、見出し要素はFiraSansのより薄いバリアントを使用しています。
このセクションでは、セルフホストフォントファイルを @font-face ルール。 フェイクボールドとイタリックがフォントの視覚的表現にどのように影響するか、そして多くのフォントファイルを共通のものとリンクする方法を学びました font-family 価値。 前のセクションでは、可変フォントを使用します。これにより、単一のフォントファイルから供給される多くのバリエーションが可能になります。
可変フォントの操作
可変フォントは、Webタイポグラフィのオプションに比較的新しく追加されたものです。 前のセクションでは、各フォントの太さとスタイルを個々のファイルからロードする必要がありましたが、可変フォントには、多くのバリエーションを計算できる単一のファイル内の情報が含まれています。 可変フォントは、パフォーマンスを向上させるだけでなく、以前よりもはるかに多くのデザインの可能性を提供します。 このセクションでは、を使用して可変フォントをロードします @font-face フォントの表示を規則化して微調整し、適切なバリエーションを見つけます。
可変フォントの操作を開始するには、 styles.css テキストエディタで。 まず、すべてを削除します @font-face 前のセクションのルールを次の新しいルールに置き換えます。
@font-face {
font-family: Raleway;
src: url('fonts/raleway/Raleway.woff2') format('woff2');
font-style: normal;
font-weight: 300 800;
}
body {
...
可変フォントは構造的に標準と同じように見えます @font-face ルール。 最初に宣言します font-family 名前を付けてから、 src 多くの場合、可変フォントでは1つの形式のみが必要です。 The font-style プロパティはに設定されました normal このフォントの場合。 違いは font-weight 価値。 単一の値を定義する代わりに、範囲は最も薄い重みの後に最も厚い重みが続くように記述されます。 この範囲を定義することにより、ブラウザーは発生する可能性のある変動計算に備えることができます。 ここで設定します font-face Ralewayのルール、 font-weight の範囲 300 に 400.
次に、フォントスタックにRalewayを確立する必要があります。 削除する "Fira Sans" フォントスタックの最初から、次のように置き換えます Raleway. 名前から Raleway スペースは含まれていません。引用符で囲む必要はありません。
...
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: Raleway, "PT Sans", Calibri, Tahoma, sans-serif;
}
...
変更をに保存します styles.css 開いて index.html Webブラウザで。 ブラウザは、フェイクウェイトではなくTrueフォントウェイトを生成しますが、定義されたイタリックスタイルがないため、イタリックを正しく処理していません。
Raleway可変フォントのイタリックバージョンを設定するには、に戻ります。 styles.css テキストエディタで。 最初の下 @font-face ルール、新しいルールセットを作成します。
@font-face {
font-family: Raleway;
src: url('fonts/raleway/Raleway.woff2') format('woff2');
font-weight: 300 800;
font-style: normal;
}
@font-face {
font-family: Raleway;
src: url('fonts/raleway/Raleway-Italic.woff2') format('woff2');
font-weight: 300 800;
font-style: italic;
}
body {
...
}
...
The src フォントファイル名をから変更しました Raleway.woff2 に Raleway-Italic.woff2、 そしてその font-style 値は今です italic.
変更をに保存します styles.css ブラウザでページを更新します。 ブラウザは現在、Ralewayのさまざまな重みのイタリックバージョンをレンダリングしています。 次の画像は、完全なRaleway可変フォントが設定されたページの更新バージョンを示しています。
可変フォントを使用する利点は、で定義された数値全体が font-weight 範囲が利用可能です。 標準のフォントの重みは100の値で増加しますが、可変のフォントの重みは1までの値で増加する可能性があります。 これにより、これまで不可能だった方法でフォントの視覚的なデザインを微調整する方法が提供されます。
範囲の重み値を使用するには、に戻ります。 styles.css テキストエディタで、次の変更を行います。
...
h1 {
font-size: 3rem;
font-weight: 350;
}
h2 {
font-size: 2rem;
font-weight: 570;
}
h3 {
font-size: 1.75rem;
font-style: italic;
font-weight: 450;
}
p {
font-size: 1.125rem;
}
strong {
font-weight: 600;
}
のために h1 セレクター、あなたは変更しました font-weight の値 350. 次に、 h2 font-weight プロパティに 570 そしてその h3 に 450. 最後に、 strong 要素はで選択します font-weight プロパティをに設定 650.
変更をに保存してください styles.css、次にブラウザに戻って更新します index.html. ブラウザは、ページ全体にRalewayフォントのさまざまな重みをレンダリングするようになりました。 次の画像は、これがブラウザにどのように表示されるかを示しています。
この最後のセクションでは、Webページに可変フォントをロードして使用しました。 1ダースの標準フォントよりもはるかに多くのバリエーションが1つまたは2つの可変フォントからもたらされる可能性があります。 また、可変フォントを調整して、以前とは異なり、デザインのニーズに適したバリエーションを見つける方法も学びました。
結論
フォントは、デザインの視覚的美学にとって重要な要素です。 それらは、あるWebサイトを別のWebサイトから際立たせるのに役立つアセットとして非常に人気があります。
このチュートリアルを通じて、Webサイトでフォントを使用する主な方法を学びました。 ローカルフォントとフォントスタックを使用して、ロードを試みるフォントをブラウザに指示しました。 次に、フォントホスティングサービスを使用して、GoogleFontsからフォントOpenSansを効果的にロードしました。 次に、独自のシリーズを設定します @font-face ルールを作成し、独自のセルフホストフォントファミリを作成しました。 最後に、学習した内容に基づいて独自のフォントをロードし、可変フォントを使用して、それらが提供する汎用性とパフォーマンスを試してみました。 フォントがローカル、ホスティングサービス、またはセルフホストのいずれであるかに関係なく、フォントスタックにフォールバックフォントを常に含めることが重要です。これは、不明な理由でフォントが読み込まれない場合があるためです。
CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。
