css - 3

フォントの種類

serif

sans-serif

cursive (scirpt or decorative fonts)

fantasy (decorative fonts)

monospace

web fonts

web safe font-通常、システムにインストールされるフォント.ユーザーはダウンロードすることなく、好きなように表現することができます.(Arial、Helvetica等)

webfont-ブラウザからダウンロードするフォント

が必要で、まだインストールされていません
Webセキュリティフォントのサイトについて
cssfontstack.com
ネットワークフォント拡張子のタイプ

販売停止:IE 8以下

TTF:旧アンドロイドバージョン(4.4)で必要です.

WOFF:ほとんどのモダンブラウザでは

がサポートされています

WOFF 2:

圧縮はWOFFより30%高い

@font-face

どのスタイルコードでも@font-faceが最初に表示されます.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

font shorthand

/* shorthand */
font: italic small-caps bold 24px/1.5 Helvetica, sans-serif;

/* longhand */
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 24px;
line-height: 1.5;
font-family: Helvetica, sans-serif

font display

@font-faceのプロパティ

auto-ブラウザの基本動作.

block-FOIT(テキストをタイムアウトに表示しない)

swap-応答を無制限に待機し、その前に基本フォントが表示されます.重要なフォントを適用する必要がある場合に使用できます.

fallback-100 ms程度の時間でblockを行い、基本フォントを表示します.応答があれば、対応するフォントでswapを行うことができますが、短い時間(3 s)待つだけです.

option-100 ms程度の時間帯にblockを行い、基本フォントを表示します.その後は置換されません.=>フォントに関係なく

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}