font-family 取值
//可以是某种具体的字体名称 也可以是某种系列的字体族名称
body {
font-family : "Microsoft YaHei",Arial,Helvetica,sans-serif;
}
有以下几个注意点:
- 渲染取值,从前往后依次优先尝试使用。
- 是尝试使用,如果用户计算机中没有对应的字体的话,就继续尝试使用后面的值。
- 尽量使用英文,中文标识符可能有兼容性问题。
- 如果字体族名称中间有空格的话 需要使用 双引号
字体族分类
- serif(衬线)
- sans-serif(无衬线) (网页常用字体)
- monospace(等宽)
- fantasy(梦幻)
- cuisive(草体)
目前web设计中,大家都默认使用 sans-serif(无衬线)字体
其中,我们常见的 SimSum(宋体)属于衬线字体, 微软雅黑、PingFangSC属于无衬线字体。
各个系统下的字体
- window下
宋体,微软雅黑, Arial 等 - Mac OS 下
苹方(PingFang SC)黑体-简(Heiti SC)Helvetica Helvetica Neue等 - ios和 Mac OS上基本保持一致
- 安卓系统
「思源黑体」,英文名:Noto SansCJK(无衬线字体)
font-family 设置规则
- 优先设置英文字体,原因是中文字体基本上都能表示英文,但是英文不一定能表示中文,这样能最大程度的保证中文使用中文字体渲染,英文使用英文字体渲染
- 具体的字体名在前,字体族名在后防止出现前面的字体都没有的情况。
font-family : "Helvetica Neue",Tahoma,Arial,PingFangSC-Regular,"Hiragino Sans GB","Microsoft Yahei",sans-serif