フォントフェイス

@font-face ルールの記述に従って Web 上あるいはローカルのフォントリソースが必要に応じて自動的に読み込まれ、ページ内でスタイルとして使用できるようになる。複数の @font-face ルールを記述することで、重みや様式に応じて実際のフォントが選択されるような、複数のフェイスを持つフォントファミリーを定義することができる。

使い方

参考

@font-face で Web フォントを使おう | ほんっとにはじめての HTML5 と CSS3

Web フォント、ローカルフォントの指定方法 | softel メモ

@font-face  – Web フォントの利用 | CMAN

Web フォントの利用を指定する @font-face 規則の使い方 | できるネット

@font-face | Web デザインラボ

@font-face | とほほの WWW 入門

@font-face | WWWクリエイターズ

Using @font-face | CSS-Tricks

@font-face Rule | W3Schools

Web フォントの種類

  • WOFF / Web Open File Format (.woff) ── モダンブラウザ用
  • WOFF2 / Web Open File Format 2 (.woff2)
  • TrueType (.ttf) ── Android 4.3 以下用
  • OpenType (.ttf / .otf)
  • Embedded OpenType (.eot) ── IE 用
  • SVG font (.svg / .svgz) ── iOS 5 以下用

参考

@font-face | Web デザインラボ

@font-face | MDN

CSS @font-face Rule | W3Schools

src

参考

src | MDN

When using CSS @font-face, in what order do browsers use the different types? – Stack Overflow

font-display

  • autoクライアントのデフォルトの戦略を使用する。ほとんどのブラウザで block に似た挙動を示す。(デフォルト)
  • block短いブロック期間の後に永続的なスワップ期間を設定する。
    → 指定したフォントがダウンロードされなければ3秒程度何も表示されず、それ以降は代替フォントで表示され、フォントがダウンロードされ次第入れ替えられる。
  • swap非常に短いブロック期間の後に永続的なスワップ期間を設定する。
    → すぐに代替フォントが表示され、指定したフォントがダウンロードされ次第入れ替えられる。
  • fallback非常に短いブロック期間の後に短いスワップ期間を設定する。
    → ブロック期間内に指定したフォントがダウンロードされなければ代替フォントで表示され、スワップ期間内にダウンロードされなければ代替フォントの表示を維持する。
  • optional非常に短いブロック期間のみを設け、スワップ期間は設定しない。
    → ブロック期間内に指定したフォントがダウンロードされなければ代替フォントで表示される。
設定方針
  • ブラウザに任せる → auto
  • すぐに表示されなくてもよい → block
  • すぐに表示する → swap
  • 時間が掛かった場合に表示を入れ替えない → fallback
  • 特にそのフォントでなくてもよい → optional

参考

Web フォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる | ラボラジアン

font-display – Web 制作者が知っておきたい、Web フォントを快適に表示する CSS の新しいプロパティ | コリス

font-display | MDN

Controlling Font Performance with font-display | Google Developers [Official]

font-display | Can I Use Support Tables

ウェイト/スタイル別にフォントを割り当てる

参考

@font-face で複数の weigth や style を持つ Web フォントを定義する方法 | WEB クリエイターの部屋

font-weight | MDN

font-style | MDN

サブセットを使う (unicode-range)

参考

CSS の @font-face で合成フォント (サブセット) っぽいことをしてみる | SPYWEB

unicode-range 記述子 | cocochido

unicode-range | MDN

unicode-range | CSS-Tricks

Font unicode-range Subsetting | Can I Use Support Tables

自前でフォントを用意する

こちらのページを参照

参考

Web フォントをサーバにアップロードして使うには?注意点や実装方法まとめ | 株式会社グランフェアズ

ヒラギノ角ゴシックのウェイトを調節する

参考

CSS でヒラギノ角ゴシックのウェイトを指定する方法 | Ryusei’s Notes

El Capitan のヒラギノ角ゴシック | Noriyuki Shimizu

Tips

参考

Best Practices for Fonts | Google web.dev

規格

参考

@font-face 規則 | CSS Fonts Module Level 3 日本語訳 (triple-underscore.github.io)

The @font-face rule | CSS Fonts Module Level 3 (W3C)

記事をシェアする:
タグ:

コメントを残す

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