Font

Wikipedia:Monospaced font
Wikipedia:Web Open Font Format
- 是对 SNFT 类型字体(TrueType,Opentype)的封装
- 添加了压缩, zlib, 能达到 40% 左右的压缩率
- 2.0 使用 Brotli 压缩
Mac OS X: Font locations and their purposes
codepen.io/ambarli/pen/mqRErQ
Can i use unicode range
Helvetica
- Regular, Oblique, Bold, Bold Oblique
Helvetica Neue
- Condensed Bold, Condensed Black, Ultra-light, Ultra-light Italic, Light, Light Italic, Regular, Italic, Bold, Bold Italic
JavaScript/CSS Font Detector
Js detech font
衬线体 Serif
无衬线体 Sans-serif
iosfonts.com

bash

system_profiler SPFontsDataType
fc-list : file family
fc-list : family

cursive

html

<link href="http://fonts.googleapis.com/css?family=Codystar" rel="stylesheet" type="text/css" />

安全字体

css

body {
  font-family: 'Times New Roman', Times, serif;
}
body {
  font-family: 'PingFangSC', 'Microsoft YaHei', Helvetica, sans-serif;
}

Roboto

Noto

WebFont 预览版
- fonts.google.com/earlyaccess
Noto Sans+SC Sliced
- Unicode Range 版本

Noto Sans SC Offline

bash

# NotoSansSC
# 字体下载, 需要使用代理
# http://fonts.googleapis.com/earlyaccess/notosanssc.css
curl -L --remote-name-all fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-{Thin,Light,Regular,Medium,Bold,Black}.{woff2,woff,otf}

curl -L --remote-name-all -J- fonts.gstatic.com/ea/notosanssc/v1/NotoSansSC-{Thin,Light,Regular,Medium,Bold,Black}.woff2

notosanssc.css

css

/*
* Noto Sans SC (Chinese Simplified) http://www.google.com/fonts/earlyaccess
* http://fonts.googleapis.com/earlyaccess/notosanssc.css
*/
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 100;
  src:
    url(./NotoSansSC-Thin.woff2) format('woff2'),
    url(./NotoSansSC-Thin.woff) format('woff'),
    url(./NotoSansSC-Thin.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 300;
  src:
    url(./NotoSansSC-Light.woff2) format('woff2'),
    url(./NotoSansSC-Light.woff) format('woff'),
    url(./NotoSansSC-Light.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 400;
  src:
    url(./NotoSansSC-Regular.woff2) format('woff2'),
    url(./NotoSansSC-Regular.woff) format('woff'),
    url(./NotoSansSC-Regular.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 500;
  src:
    url(./NotoSansSC-Medium.woff2) format('woff2'),
    url(./NotoSansSC-Medium.woff) format('woff'),
    url(./NotoSansSC-Medium.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 700;
  src:
    url(./NotoSansSC-Bold.woff2) format('woff2'),
    url(./NotoSansSC-Bold.woff) format('woff'),
    url(./NotoSansSC-Bold.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 900;
  src:
    url(./NotoSansSC-Black.woff2) format('woff2'),
    url(./NotoSansSC-Black.woff) format('woff'),
    url(./NotoSansSC-Black.otf) format('opentype');
}