@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” という名前のダウンロードフォントが使用されます。