Font

• https://en.wikipedia.org/wiki/Monospaced_font
• https://en.wikipedia.org/wiki/Web_Open_Font_Format
  • 是对 SNFT 类型字体(TrueType,Opentype)的封装
  • 添加了压缩, zlib, 能达到 40% 左右的压缩率
  • 2.0 使用 Brotli 压缩
• Mac OS X: Font locations and their purposes
• https://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
• http://iosfonts.com/

system_profiler SPFontsDataType
fc-list: file family | grep \/Library

cursive

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

安全字体

• CSS Web Safe Font Combinations
• Fonts included with macOS Sierra
• List of typefaces included with macOS
  • Helvetica
• List of typefaces included with Microsoft Windows
  • Microsoft YaHei
• 网页设计中常用的 19 个 Web 安全字体

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

Roboto

• Android 默认字体
• https://github.com/google/roboto/
• https://fonts.google.com/specimen/Roboto

Noto

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

Noto Sans SC Offline

# 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

/*
* 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');
}

woff2

• https://github.com/google/woff2

Builder

• https://birdfont.org/
• https://github.com/jaywcjlove/svgtofont
• https://github.com/adobe-type-tools/opentype-svg

FAQ

• 正式的碑刻一般用隶书、魏碑 比较庄严、庄重的字体
• 文艺范儿的碑刻会用行楷、草书
• 宋体是用于印刷的，笔划比较直、每一笔的粗细没什么变化、笔划结尾有“小三角”，刻字师傅为了在雕刻印版、活字方便下刀，逐步形成了这种字体