网页字体系统的设置font-family #391
Description
网页字体系统的设置font-family
基本原则
- font-family 的写法先定义西文字体，再定义中文字体
- 要考虑兼顾移动端、PC端和Pad端等
- 要考虑兼顾Windows操作系统、Mac 操作系统和移动Android操作系统等
font-face引用自定义字体
引用自定义字体系列虽然能够解决各种显示的兼容问题，但也得考虑加载字体的效率，以及最最重要的是字体版权的问题。一般不建议这样特别去引，除非真的有版权。
@font-face {
font-family: 'Rhythm Cursive';
src:
local('Kaiti TC Regular'),
local(STKaiti),
local(BiauKai)
;
}
字体风格都有哪些
西文字体系列大体分衬线(正文)字体、无衬线(标题)字体、等宽(代码)字体三类。其中衬线字体给人更传统和正式，让人更可信。
- 常用无衬线字体：
Gotham, Helvetica, Myriad；Gill Sans和Futura有时也用。 - 常用衬线体字体：
Caslon, Minion和Garamond，一般在正文中使用。
*以下为常用额字体系列查询字典：
| 字体系列分类 | 字体 | 操作系统/端兼容 | 字体名称 | 备注 |
|---|---|---|---|---|
| 【西文】系统字体优先 | -apple-system | OSX ^10.11 & iOS ^9 | San Francisco & 苹方 | safari识别 |
| 【西文】系统字体优先 | BlinkMacSystemFont | chrome识别 | ||
| 【西文】第二梯队 | Ubuntu | 对应的是 Linux，使用不多 | ||
| 【西文】第二梯队 | Roboto | Android 和 Chrome OS | 使用不多 | |
| 【西文】第二梯队 | " Segoe UI", | Win ^8（Windows 和 Windows Phone；） | ||
| 【西文】兜底渲染方案 | "Helvetica" | 世界通用的经典无衬线体； | ||
| 【西文】兜底渲染方案 | "Helvetica Neue", | OS X pre-EI Capitan | 在非 EI Capitan 的机器上是一个比较常见的字体； | |
| 【西文】兜底渲染方案 | "Arial", | Win | Arial 是 Windows 3.1 开始就一直随视窗系统分发的字体，作为最后的回退方案。 | |
| 【中文】系统字体优先 | "PingFang SC", | OSX ^10.11 & iOS ^9 | 苹方（华康信凭黑） | "PingFang SC" 即苹方，是 OS X EI Capitan(10.11) 上 的系统中文字体。值得一提的是，EI Capitan 上 Chrome 默认的中文字体渲染是 ST Heiti(华文黑体)，而非作为系统 UI 字体的苹方； |
| 【中文】系统字体优先 | "Hiragino Sans GB", | OSX ^10.6 之后作为系统字体支持 | 冬青黑体 | 冬青黑体的表现都会比微软雅黑优秀。而自 10.6 开始，OS X 就 系统自带 了冬青黑体，因此将其置于微软雅黑之前。 |
| 【中文】第二梯队 | "Microsoft YaHei", | 兼容Win系统 | 微软雅黑, | |
| 【中文】第二梯队 | "Source Han Sans CN", | SourceHan - begin 思源黑体 | "Source Han Sans CN" 即思源黑体，是大部分 Android 的系统中文字体。 | |
| 【中文】第二梯队 | "Microsoft JhengHei", | 兼容Win系统 | 微软正黑 | |
| 【中文】兜底方案 | "Noto Sans CJK SC", | |||
| 【中文】兜底方案 | "STHeiti" | OSX <10.6 & iOS <9 | 华文黑体 | |
| 【中文】兜底方案 | "Noto Sans SC", | |||
| 【中文】兜底方案 | "Source Han Sans TC", | |||
| 【中文】兜底方案 | "Noto Sans CJK TC", | SourceHan - end | ||
| 【中文】兜底方案 | "WenQuanYi Micro Hei", | Linux | 文泉驿微米黑 | |
| 【中文】兜底方案 | "SimSun" | Win old | 中易宋体 | |
| 【中文】兜底方案 | "sans-serif" | 无衬线字体 | System Fallback | 中文字体最后的兜底 |
最佳实践建议
body {
font-family: -apple-system, BlinkMacSystemFont,"Arial", "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
}
最简单，最广泛应用。
body {
font-family: arial, sans-serif;
}
ant design 字体
@font-family: /*西文*/-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,/*中文*/
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';