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
Noto
- WebFont 预览版
- 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
Builder
- https://birdfont.org/
- https://github.com/jaywcjlove/svgtofont
- https://github.com/adobe-type-tools/opentype-svg
FAQ
- 正式的碑刻一般用隶书、魏碑 比较庄严、庄重的字体
- 文艺范儿的碑刻会用行楷、草书
- 宋体是 用于印刷的,笔划比较直、每一笔的粗细没什么变化、笔划结尾有“小三角”,刻字师傅为了在雕刻印版、活字方便下刀,逐步形成了这种字体