苏南大叔和大家聊一聊css中的字体问题,css中可以设置字体,主要用于规范文字在浏览器中的表现状态。而全世界的字体文件是成千上万的,并且用户电脑中安装的字体也是不一定的。所以,这个css中,有关font-family的设置也是千奇百怪的。不过,对于国人来说,目前都是使用“微软雅黑”或者“宋体”作为默认,这是较为常见的。

苏南大叔:如何理解css字体font-family:serif、sans-serif、monospace - css-font-family
如何理解css字体font-family:serif、sans-serif、monospace(图3-1)

本文测试环境:mac/chrome

常见的cssfont-family组合

下面的是一些css中的font-family组合,大家可以先看看大厂门的权威意见:

www.taobao.com:

body {
  -webkit-font-smoothing: antialiased;
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

其中这个很奇怪的\5b8b\4f53,在\后面添加一个u,就可以变成"宋体"两个字。

news.163.com:

body{
  font-family:"Microsoft YaHei", "微软雅黑", "宋体", sans-serif;
}

www.tudou.com

body {
  font-family: "PingFang SC", "Lantinghei SC", "Microsoft Yahei", "\5FAE\8F6F\96C5\9ED1", "helvetica", "arial", "verdana", "tahoma", "sans-serif";
}

\5FAE\8F6F\96C5\9ED1,转化为中文是"微软雅黑"。

php.net

body{
  font-family: "Fira Sans", "Source Sans Pro", Helvetica, Arial, sans-serif;
}

serifsans-serifmonospace

在定义好的网页字体列表里面,混杂在大家熟知的微软雅黑宋体等之中,还存在着几个特殊的名字:serifsans-serifmonospace。这几个特殊名字的解释如下:

  • serif:衬线字体,就是边角有特殊修饰的字体。宋体字就是有衬线字体。Serif的意思是,在字的笔划开始及结束的地方有额外的装饰,而且笔划的粗细会因直横的不同而有不同。
  • sans-serif:无衬线字体,无特殊修饰的字体。sans是法语,意思是“没有”。黑体字就是无衬线字体。Sans Serif则没有这些额外的装饰,笔划粗细大致差不多。
  • monospace:等宽字体,每个字母都一般宽的字体。
平时所用的GeorgiaTimes New Roman等就属于Serif字体,而ArialTahomaVerdana等则属于Sans Serif字体。对中文而言,同样存在这两大种类,很明显,宋体、细明体(繁体中常用)等就属于Serif,而黑体、幼圆等则属于Sans Serif

chrome浏览器设置界面

这三个名字是特殊的,都是个虚拟的概念。三者都可以被浏览器自定义为某个真实的字体。比如,大家可以看一下最常见的chrome浏览器的字体设置界面,就可以看到,对这三种字体的单独设置界面。

chrome://settings/fonts,截图如下:

苏南大叔:如何理解css字体font-family:serif、sans-serif、monospace - chrome-font-1
如何理解css字体font-family:serif、sans-serif、monospace(图3-2)

苏南大叔:如何理解css字体font-family:serif、sans-serif、monospace - chrome-font-2
如何理解css字体font-family:serif、sans-serif、monospace(图3-3)

可以看到,对于新安装的chrome,没有设置默认字体,默认的衬线字体是"宋体",默认的等宽字体是courier。不过,对于浏览器设置来说,衬线和非衬线,实际上并不真实区分字体font的真实归属,随便交叉设置也是可以的。

实验代码

苏南大叔分别定义了几个serifsans-serifmonospacediv,可以看到:这些div的具体表现,确实是随着浏览器的字体设定的改变而改变的。

<div style="font-family:serif">serif</div>
<div style="font-family:sans-serif">sans-serif</div>
<div style="font-family:monospace">monospace</div>
<div style="font-family:">no setting</div>

大家可以开两个界面,一个是上述html,另外一个是chrome的字体设置页面chrome://settings/fonts,就可以实时看到效果了。

总结

写了这么多年的web,才知道这天天打交道的font-family还有这种虚拟字体的说法。真心是不是有些吓一跳?cssfont字体,相关变化还非常多。更多字体相关精彩内容,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   css    font

本站的忠实读者小伙伴,正在阅读下面这些文章: