CSSでカスタムフォントをロードして使用する方法
著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。
序章
ウェブサイトの視覚的アイデンティティは、主に色と書体という2つのデザイン原則によって決定されます。 過去10年間で、デバイスにプリロードされたフォントをユーザーに提供すること、@font-face
ルールを使用してカスタムフォントをロードする機能、およびフォントホスティングサービスの使用において大きな進歩がありました。 Webブラウザーは、可変フォントのサポートも実装しています。これは、複数のフォントを補間できる単一のフォントファイルであり、高度な調整とフォントのカスタマイズを提供します。
このチュートリアルでは、Webサイトにフォントをロードする例を試してみます。 ユーザーのデバイスにインストールされている可能性のあるフォントを使用するには、フォントスタックを使用します。これは、可用性に基づくフォントのランク付けです。 次に、フォントホスティングサービス Google Fonts を使用して、カスタムフォントを検索、選択、およびページにロードします。 最後に、@font-face
ルールを使用して自己ホスト型フォントファミリをロードし、続いて自己ホスト型可変フォントをロードします。
前提条件
- カスケードと特異性を使用してCSSスタイルをHTMLに適用する方法を読むことで得られるCSSのカスケードと特異性の機能の理解。
- タイプセレクター、コンビネーターセレクター、セレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
- CSSのフォントスタックとフォントプロパティの理解。これは、チュートリアル CSS でフォント、サイズ、および色を使用してテキスト要素のスタイルを設定する方法にあります。
- ローカルマシンに
index.html
として保存された空のHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズを使用してWebサイトを構築する方法全体を試してください。
HTMLの設定と初期フォントスタックの作成
フォントスタックの概念は、大多数のコンピューターにインストールできる信頼できるフォントがほんのわずかしかなかったWebの初期に由来します。 多くの場合、フォントが使用できない可能性が高いため、フォントスタックは、ブラウザが検索してロードしようとするフォントの順序を提供していました。 このセクションでは、復元力のあるフォントスタックの原理と、最新のデバイスでフォントに使用できるオプションについて学習します。 ただし、最初に、フォントを示すためのサンプルHTMLを作成します。
テキストエディタでindex.html
を開くことから始めます。 次に、次のHTMLをファイルに追加します。
index.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ファイルの文字セットを定義します。 2番目の<meta>
タグは、モバイルデバイスがページをレンダリングする方法を定義します。 次に、<title>
タグでページにタイトルを付けます。 最後に、<link>
タグは、後でページのスタイルを作成するために使用するCSSファイルを参照します。
次に、<body>
タグ内に、ページのコンテンツを追加します。 このコンテンツは、 Cupcake Ipsum のフィラーコンテンツと呼ばれ、実際には何も言わずにコンテンツのように見えるテキストを提供します。 フィラーの内容は、次のコードブロックで強調表示されています。 コードが追加および変更されると、チュートリアル全体でこの強調表示方法に遭遇します。
index.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> <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>
フィラーコンテンツには、さまざまなフォントスタイルを提供するために使用されるいくつかの要素が含まれています。 <strong>
タグはデフォルトでコンテンツを太字にし、<em>
タグはコンテンツを斜体にし、見出しタグはフォントサイズを大きくしてコンテンツを太字にします。
次に、テキストエディタに戻り、styles.css
ファイルをindex.html
と同じフォルダに作成します。 これは、index.html
の<head>
要素で参照したファイルです。 styles.css
ファイルに、次のコードを追加します。
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%) }
これらのスタイルは、ページの全体的な視覚スタイルを作成します。 header
の背景は紫色で、内部のh1
とp
は薄紫色です。 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
プロパティを追加し、その値をフォントスタックと呼ばれるフォントのコンマ区切りリストにします。
styles.css
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つのフォントのいずれも使用できない場合、ブラウザはHelveticaやArialなどのブラウザのデフォルトのsans-serif
フォントを使用します。
変更内容をstyles.css
に保存してから、ブラウザでindex.html
を更新してください。 オペレーティングシステムとインストールされているフォントによって、レンダリングされるフォントとそのレンダリング方法が決まります。 次の画像は、macOSのFirefoxにロードされたときにPTSansがフォントとしてどのように表示されるかを示しています。
フォントファミリーは、特定のフォントのすべての太さとスタイルのバリエーションで構成されています。 ファミリには、フォントの表示の細さ、太さ、傾斜の程度を変更する多くの追加の太さやスタイルを含めることができます。
font-style
プロパティは、フォントの傾きを決定します。 値は最も一般的にはitalic
です。 ただし、一部のフォントはoblique
値をサポートしています。これは、傾斜の急勾配を示すオプションの次数値を受け入れます。
font-weight
プロパティには、normal
とbold
の2つの定義済み名前付き値がありますが、この値を決定するための最も用途が広く予測可能な方法は、重み番号を使用することです。 ウェイト番号の値は通常、100から900まで100の増分で定義され、100は薄いウェイト、900は厚いウェイトです。 ブラウザが指定された太さに対応するフォントを見つけられない場合、ブラウザは利用可能な最も近いサイズを見つけます。
チュートリアル全体でこのページの新しいベースフォントスタイルを設定するには、テキストエディタでstyles.css
に戻ります。 次に、h1
、h2
、h3
、およびp
要素ごとに要素セレクターを作成します。 各セレクター内に、次のコードブロックから強調表示されたCSSを追加して、フォントサイズを大きくし、見出しを強調します。
styles.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; }
ここでのh1
は、3rem
のfont-size
に設定されます。これは、48px
と同等で、100
。 次に、h2
を2rem
に設定します。これは、32px
と同等であり、font-weight
は200
です。 次に、h3
はfont-weight
に設定され、h2
と少し小さいfont-size
に設定されますが、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でどのように表示されるかを示しています。
次に、GoogleFontsサービスからファイルを読み込むために必要な<link>
タグをコピーします。 これを行うには、' の代わりにオプション @輸入' GoogleFontsインターフェースでファイルをロードする方法としてのオプション。 提示された一連の<link>
タグをコピーします。 次に、テキストエディタでindex.html
に戻ります。 <head>
要素の内部に入り、<link>
タグがstyles.css
を読み込んだ後、GoogleFontsから<link>
タグを貼り付けます。 次のコードブロックで強調表示されているHTMLは、コピーされたコードを追加する場所を示しています。
index.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>
最初の2つの<link>
要素は、 preconnect と呼ばれるタスクを実行します。これは、外部Web接続を優先するようにブラウザーに指示します。 次に、これら2つの<link>
要素は、3番目の<link>
からCSSファイルとフォントファイルをできるだけ早くロードするようにブラウザーを準備します。
ブラウザがフォントをページにロードする準備ができたので、次にフォントスタイルを適用して、テキストがそのフォントでレンダリングされるようにする必要があります。
変更内容をindex.html
に保存し、テキストエディタでstyles.css
に戻ります。 body
セレクターで、font-family
プロパティに移動します。 "PT Sans"
フォントの前に、フォント名"Open Sans"
を引用符で囲み、その後にコンマを付けて値を付加します。 次のコードブロックで強調表示されているCSSは、新しいフォントがフォントスタックのどこに配置されているかを示しています。
styles.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
に保存し、Webブラウザでindex.html
を開きます。 ページ上のテキストは、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
ファイルをダウンロードしたら、zipファイルに含まれているfonts
ディレクトリを抽出し、コンピュータのindex.html
およびstyles.css
ファイルと同じディレクトリに配置します。 Linuxでは、次のunzip
コマンドを使用して、コマンドラインからこれを実行できます。
unzip fonts.zip
次に、テキストエディタでindex.html
を開きます。 zipファイルからローカルフォントをロードするので、Googleフォントコードを削除できます。 このセクションでは、既存のstyles.css
ファイルからフォントファイルをロードします。 <head>
要素の内容が、次のコードブロックのように設定されていることを確認してください。
index.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>
編集内容をindex.html
に保存し、テキストエディタでstyles.css
を開きます。
@font-face
ルールを使用して、Webページにカスタムフォントをロードできます。 カスタムフォントの読み込みの歴史は、最も多くのブラウザをサポートするための複合的な方法につながりました。 @media
や@supports
などの他のatルールとは異なり、@font-face
ルールには追加の引数はありません。 ルールブロック内では、設定された数のプロパティのみが受け入れられます。 最も重要なのはfont-family
です。これは、ブラウザが適切なフォントファイルを参照およびロードするために使用する名前を表します。 次に、src
プロパティはフォントファイルの場所を参照します。 バージョン9より前のバージョンのInternetExplorer をサポートするには、2つのsrc
プロパティが必要です。最初のプロパティは、.eot
フォントファイル形式のみを参照します。 2番目のsrc
プロパティは、フォントファイル形式のコンマ区切りのリストになります。 ブラウザのバージョンは、サポートする適切な形式を選択します。
@font-face
ルールの使用を開始するには、テキストエディタでstyles.css
を開きます。 ファイルの先頭で、body
セレクターの前に、次の@font-face
ルールを作成します。
styles.css
@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 { ... } ...
このルール内に、値が"Fira Sans"
のfont-family
プロパティを引用符で囲んで追加しました。 このコードは全体的なfont-family
を定義しているため、1つのフォント名のみを使用する必要があります。 src
のフォント形式のコンマ区切りリストは2つに分かれています。 1つ目はurl()
で、background-image
プロパティと同様に、サーバー上のファイル形式へのパスを提供します。 次に、format()
は、参照されているファイルのタイプを説明し、ブラウザーがサポートされている形式を選択できるようにします。
fonts
フォルダー内のfira
フォルダーには、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
プロパティの両方で参照されます。これは、バージョン9以降のInternetExplorerでは代わりにコンマ区切り形式が使用されているためです。
FiraSansの@font-face
ルールが作成されたので、body
セレクターのfont-family
プロパティに移動します。 font-family
の値で、"Open Sans"
を"Fira Sans"
に置き換えて、ページでセルフホストフォントを使用します。 次のコードブロックの強調表示された部分は、この変更を示しています。
styles.css
@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
に保存し、Webブラウザでindex.html
を開きます。 フォントの太字と斜体のバージョンが正しく表示されないことに注意してください。 これは、@font-face
ルールでは、通常のフォントの太さとスタイルファイルのみが読み込まれて使用されたためです。 ブラウザが太字または斜体のスタイルをフォントに適用する必要があるが、適切なフォントファイルがない場合、ブラウザは必要なバリエーションを作成します。 この変更されたフォントの形式は、フェイクボールドおよびフェイクイタリックとして知られています。 フェイクボールドは、フォントにストロークを追加することで作成されます。これにより、意図したレイアウトに干渉する可能性のある文字間の間隔が広くなることがよくあります。 偽のイタリックは、フォントを斜めにすることで作成されます。フォントは、実際のイタリックのようにスペースを使用しないことがよくあります。
次の画像は、偽の太字、斜体、および太字の斜体スタイルがブラウザにどのように表示されるかを示しています。
ブラウザにフォントファミリの適切なバリエーションを提供するには、@font-face
ルールで詳細を提供する必要があり、追加のバリエーションファイルをロードするためのルールをさらに作成する必要があります。
テキストエディタでstyles.css
に戻ります。 @font-face
ルールで、2番目のsrc
プロパティの後にfont-weight
プロパティとfont-style
プロパティを追加します。
styles.css
@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
の各組み合わせを参照します。
styles.css
/* 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; } ...
バリエーションが追加されると、コメントを追加して、フォントの太さのグループをより簡単に識別できるようになります。 したがって、最初の@font-face
ルールの上にCSSコメントを追加しました。 次に、最初のルールの下に、フォントのイタリック、ボールド、およびボールドのイタリックバリエーション用にさらに3つの@font-face
ルールを作成しました。
これらの更新をstyles.css
ファイルに保存してから、ブラウザーでindex.html
を更新してください。 これで、ブラウザは提供されているフォントファミリのすべてのバリエーションをロードしています。 次の画像は、太字、斜体、太字の斜体の偽のバージョンと実際のバージョンの違いを示しています。
真の太字はブラウザの偽の太字よりもはるかに太く、テキストは互いに接近しており、太いフォントストロークを考慮しています。 「イタリック」という単語の小文字のa文字を比較すると、真のイタリックがより顕著になります。 斜体の場合、フォントはa文字のスタイルを変更します。 さらに、真のイタリックの傾斜は、ブラウザの偽のイタリックよりも程度が低くなります。
次に、見出し要素がFira Sansのより薄いウェイトバージョンを使用しているため、ロードするフォントのバリエーションがさらにいくつかあります。
テキストエディタでstyles.css
に戻り、通常のバージョンの@font-face
ルールの上にさらに4つの@font-face
ルールを作成します。
styles.css
/* 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; } ...
これらの新しいルールは、FiraSansのThin
およびLight
バリエーションをロードし、それぞれ100
および200
font-weight
値にマップされます。 これらのサイズには単語の値がないため、通常の太字のfont-weight
プロパティの値を数値に変更しました。
これらの変更をstyles.css
に保存してから、ブラウザに戻ってindex.html
を更新してください。 次の画像に示すように、見出し要素はFiraSansのより薄いバリアントを使用しています。
このセクションでは、@font-face
ルールを使用してセルフホストフォントファイルをロードしました。 偽の太字と斜体がフォントの視覚的表現にどのように影響するか、および多くのフォントファイルを共通のfont-family
値とリンクする方法を学びました。 前のセクションでは、可変フォントを使用します。これにより、単一のフォントファイルから供給される多くのバリエーションが可能になります。
可変フォントの操作
可変フォントは、Webタイポグラフィのオプションに比較的新しく追加されたものです。 前のセクションでは、各フォントの太さとスタイルを個々のファイルからロードする必要がありましたが、可変フォントには、多くのバリエーションを計算できる単一のファイル内の情報が含まれています。 可変フォントは、パフォーマンスを向上させるだけでなく、以前よりもはるかに多くのデザインの可能性を提供します。 このセクションでは、@font-face
ルールを使用して可変フォントをロードし、フォントの表示を微調整して適切なバリエーションを見つけます。
可変フォントの操作を開始するには、テキストエディタでstyles.css
を開きます。 まず、前のセクションからすべての@font-face
ルールを削除し、それらを次の新しいルールに置き換えます。
styles.css
@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つの形式のみが必要です。 このフォントでは、font-style
プロパティがnormal
に設定されていました。 font-weight
の値には違いがあります。 単一の値を定義する代わりに、範囲は最も薄い重みの後に最も厚い重みが続くように記述されます。 この範囲を定義することにより、ブラウザーは発生する可能性のある変動計算に備えることができます。 ここでは、Ralewayのfont-face
ルールを、font-weight
の範囲を300
から400
に設定します。
次に、フォントスタックにRalewayを確立する必要があります。 フォントスタックの先頭から"Fira Sans"
を削除し、Raleway
に置き換えます。 名前Raleway
にはスペースが含まれていないため、引用符で囲む必要はありません。
styles.css
... 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
に保存し、Webブラウザでindex.html
を開きます。 ブラウザは、フェイクウェイトではなくTrueフォントウェイトを生成しますが、定義されたイタリックスタイルがないため、イタリックを正しく処理していません。
Raleway可変フォントのイタリックバージョンを設定するには、テキストエディタでstyles.css
に戻ります。 最初の@font-face
ルールの下に、新しいルールセットを作成します。
styles.css
@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 { ... } ...
src
はフォントファイル名をRaleway.woff2
からRaleway-Italic.woff2
に変更し、font-style
の値はitalic
になりました。
変更内容をstyles.css
に保存し、ブラウザでページを更新します。 ブラウザは現在、Ralewayのさまざまな重みのイタリックバージョンをレンダリングしています。 次の画像は、完全なRaleway可変フォントが設定されたページの更新バージョンを示しています。
可変フォントを使用する利点は、font-weight
の範囲で定義された任意の数値全体を使用できることです。 標準のフォントの重みは100の値で増加しますが、可変のフォントの重みは1までの値で増加する可能性があります。 これにより、これまで不可能だった方法でフォントの視覚的なデザインを微調整する方法が提供されます。
範囲の重み値を使用するには、テキストエディタでstyles.css
に戻り、次の変更を加えます。
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
に設定します。 最後に、font-weight
プロパティを650
に設定してstrong
要素selectを作成しました。
必ずstyles.css
に変更を保存してから、ブラウザに戻ってindex.html
を更新してください。 ブラウザは、ページ全体にRalewayフォントのさまざまな重みをレンダリングするようになりました。 次の画像は、これがブラウザにどのように表示されるかを示しています。
この最後のセクションでは、Webページに可変フォントをロードして使用しました。 1ダースの標準フォントよりもはるかに多くのバリエーションが1つまたは2つの可変フォントからもたらされる可能性があります。 また、可変フォントを調整して、以前とは異なり、デザインのニーズに適したバリエーションを見つける方法も学びました。
結論
フォントは、デザインの視覚的美学にとって重要な要素です。 それらは、あるWebサイトを別のWebサイトから際立たせるのに役立つアセットとして非常に人気があります。
このチュートリアルを通じて、Webサイトでフォントを使用する主な方法を学びました。 ローカルフォントとフォントスタックを使用して、ロードを試みるフォントをブラウザに指示しました。 次に、フォントホスティングサービスを使用して、GoogleFontsからフォントOpenSansを効果的にロードしました。 次に、独自の一連の@font-face
ルールを設定し、独自のセルフホストフォントファミリを作成しました。 最後に、学習した内容に基づいて独自のフォントをロードし、可変フォントを使用して、それらが提供する汎用性とパフォーマンスを試してみました。 フォントがローカル、ホスティングサービス、またはセルフホストのいずれであるかに関係なく、フォントスタックにフォールバックフォントを常に含めることが重要です。これは、不明な理由でフォントが読み込まれない場合があるためです。
CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。