2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] @font-face規則で独自フォントの利用を指定しよう!

@font-faceの評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.@font-faceとは?

@font-face規則は独自フォントの利用を指定する@規則です。

url()関数、local関数によってフォントのURLや名前を指定するとテキストの表示Webサーバー上のフォントやユーザーのローカルPCにインストールされたフォントを適用できます。

値の指定方法は以下の通りです。

{ @font-face: font-family: ファミリー名; src: フォントのURL/名前 フォントの形式; 記述子; }

記述子

  • font-display
  • font-family
  • font-stretch
  • font-style
  • font-weight
  • font-variant
  • font-feature-settings
  • font-variation-settings
  • src




2.@font-faceの使い方

それでは@font-faceの使い方をみていきましょう。

@font-face {
 font-family: MyHelvetica;
 src: local("Helvetica Neue Bold"),
      local("HelveticaNeue-Bold"),
      url(MgOpenModernaBold.ttf);
 font-weight: bold;
}

上記の例では、ユーザーのローカルにある “Helvetica Neue Bold” が使用されます。

もしユーザーがそのフォントをインストールしていない場合は、 “MgOpenModernaBold.ttf” という名前のダウンロードフォントが使用されます。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です