本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。
苏南大叔和大家聊一聊css中的字体问题,css中可以设置字体,主要用于规范文字在浏览器中的表现状态。而全世界的字体文件是成千上万的,并且用户电脑中安装的字体也是不一定的。所以,这个css中,有关font-family的设置也是千奇百怪的。不过,对于国人来说,目前都是使用“微软雅黑”或者“宋体”作为默认,这是较为常见的。
如何理解css字体font-family:serif、sans-serif、monospace(图3-1)
本文测试环境:mac/chrome。serif、sans-serif、monospace都是泛称,具体是哪个字体,这个就要看具体的浏览器设置了。
常见的css的font-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;
}
serif、sans-serif、monospace
在定义好的网页字体列表里面,混杂在大家熟知的微软雅黑、宋体等之中,还存在着几个特殊的名字:serif、sans-serif、monospace。这几个特殊名字的解释如下:serif:衬线字体,就是边角有特殊修饰的字体。宋体字就是有衬线字体。Serif的意思是,在字的笔划开始及结束的地方有额外的装饰,而且笔划的粗细会因直横的不同而有不同。
sans-serif:无衬线字体,无特殊修饰的字体。sans是法语,意思是“没有”。黑体字就是无衬线字体。Sans Serif则没有这些额外的装饰,笔划粗细大致差不多。
monospace:等宽字体,每个字母都一般宽的字体。平时所用的Georgia、Times New Roman等就属于Serif字体,而Arial、Tahoma、Verdana等则属于Sans Serif字体。对中文而言,同样存在这两大种类,很明显,宋体、细明体(繁体中常用)等就属于Serif,而黑体、幼圆等则属于Sans Serif。
chrome浏览器设置界面
这三个名字是特殊的,都是个虚拟的概念。三者都可以被浏览器自定义为某个真实的字体。比如,大家可以看一下最常见的chrome浏览器的字体设置界面,就可以看到,对这三种字体的单独设置界面。
chrome://settings/fonts,截图如下:
如何理解css字体font-family:serif、sans-serif、monospace(图3-2)
如何理解css字体font-family:serif、sans-serif、monospace(图3-3)
可以看到,对于新安装的chrome,没有设置默认字体,默认的衬线字体是"宋体",默认的等宽字体是courier。不过,对于浏览器设置来说,衬线和非衬线,实际上并不真实区分字体font的真实归属,随便交叉设置也是可以的。
实验代码
苏南大叔分别定义了几个serif、sans-serif、monospace的div,可以看到:这些div的具体表现,确实是随着浏览器的字体设定的改变而改变的。
大家可以开两个界面,一个是上述html,另外一个是chrome的字体设置页面chrome://settings/fonts,就可以实时看到效果了。
总结
写了这么多年的web,才知道这天天打交道的font-family还有这种虚拟字体的说法。真心是不是有些吓一跳?css的font字体,相关变化还非常多。更多字体相关精彩内容,请点击苏南大叔的博客:
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。