このブログでは、CSS @font-face ルールの使用法について説明します。
CSS @font-face ルールとは?
CSS の @font-face ルールを使用して、プロジェクトのカスタム フォントを作成します。これらのフォントは、サーバーまたはシステムにインストールされているフォントからロードできます。
CSS @font-face ルールの使用方法
CSS @font-face ルールを使用するための構文を以下に示します。
@font-face {
フォントファミリー : MyNewFont ;
ソース : URL ( )
}
@font-face ルールは、font-family プロパティの値と、このフォントが存在する関連 URL を src 属性として指定することによって定義されます。
例
以下の例では、フォントをカスタマイズします。そのためには、まずブラウザからフォントをダウンロードし、プロジェクトのフォルダに追加します。サーバーからフォントを使用している場合は、リンクを使用することもできます。
最初に
タグと タグを追加し、それぞれに適用してフォントをカスタマイズします。上記のシナリオを 3 ステップで実装してみましょう。
ステップ 1: HTML ファイルに要素を追加する
ステップ 1: HTML ファイルに要素を追加する
HTML の
セクション内に、Web ページに関連するコンテンツを追加するために と を追加します。
< h2 > Linuxhint へようこそ! < / h2 >
< h1 > Linuxhint へようこそ! < / h1 >
ステップ 2: CSS で @font-face ルールを指定する
< h2 > Linuxhint へようこそ! < / h2 >
< h1 > Linuxhint へようこそ! < / h1 >
ステップ 2: CSS で @font-face ルールを指定する
ルールを指定するには、キーワード「 @font-face 」がCSSで利用されています。中括弧内に font-family プロパティを追加し、その値としてフォント名を追加します。次に、src プロパティを使用して、ダウンロードしたフォントの URL パスを指定します。
@font-face {
フォントファミリー : マイフォント ;
ソース : URL ( 「/fonts/Batuphat\Script.otf」 ) ;
}
同様に、別のカスタマイズされたフォント ブロックを追加します。
@font-face {フォントファミリー : myfont2 ;
ソース : URL ( 「/fonts/Olive_Vine\DEMO.otf」 ) ;
}
要素と 要素にスタイリングを適用します。
スタイル h2 要素
h2 {
フォントファミリー : マイフォント ;
フォントサイズ : 50px ;
}
スタイル h2 要素
h2 {フォントファミリー : マイフォント ;
フォントサイズ : 50px ;
}
要素に適用されるプロパティを以下に説明します。
- 「 フォントファミリー 」は値「」で設定されます マイフォント これは @font-face ルールで宣言したものです。
- 「 フォントサイズ 」プロパティは、フォントのサイズを 50px に設定します。
スタイル h1 要素
h1 {
フォントファミリー : myfont2 ;
フォントサイズ : 70px ;
色 : 茶色 ;
}
ここで「 色 」プロパティは、フォントの色付けに使用されます。
以下の画像から、新しく宣言されたフォントで
および タグが正常にスタイル設定されていることがわかります。
CSS @font-face ルールを使用するためのメソッドを提供しました。
結論
フォント スタイルは、アプリケーションを美的に魅力的にする上で重要な役割を果たします。私たちのシステムのフォント スタイルは限られていますが、開発者は Web アプリを美しくするためにさまざまなフォントを必要としています。そのために、CSS では @font-face ルールを使用してカスタム フォントを追加できます。この記事では、アプリケーションでフォント スタイルをカスタマイズできる @font-face ルールについて説明しました。