也谈font-family 如何设置

font-family 取值

//可以是某种具体的字体名称 也可以是某种系列的字体族名称
body {
  font-family : "Microsoft YaHei",Arial,Helvetica,sans-serif;
}

有以下几个注意点:

  1. 渲染取值,从前往后依次优先尝试使用。
  2. 是尝试使用,如果用户计算机中没有对应的字体的话,就继续尝试使用后面的值。
  3. 尽量使用英文,中文标识符可能有兼容性问题。
  4. 如果字体族名称中间有空格的话 需要使用 双引号

字体族分类

  • serif(衬线)
  • sans-serif(无衬线) (网页常用字体)
  • monospace(等宽)
  • fantasy(梦幻)
  • cuisive(草体)

目前web设计中,大家都默认使用 sans-serif(无衬线)字体
其中,我们常见的 SimSum(宋体)属于衬线字体, 微软雅黑、PingFangSC属于无衬线字体。

各个系统下的字体

  1. window下
    宋体,微软雅黑, Arial 等
  2. Mac OS 下
    苹方(PingFang SC)黑体-简(Heiti SC)Helvetica Helvetica Neue等
  3. ios和 Mac OS上基本保持一致
  4. 安卓系统
    「思源黑体」,英文名:Noto SansCJK(无衬线字体)

font-family 设置规则

  1. 优先设置英文字体,原因是中文字体基本上都能表示英文,但是英文不一定能表示中文,这样能最大程度的保证中文使用中文字体渲染,英文使用英文字体渲染
  2. 具体的字体名在前,字体族名在后防止出现前面的字体都没有的情况。
font-family : "Helvetica Neue",Tahoma,Arial,PingFangSC-Regular,"Hiragino Sans GB","Microsoft Yahei",sans-serif

你可能感兴趣的:(也谈font-family 如何设置)