苏南大叔和大家聊一聊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/chromeserifsans-serifmonospace都是泛称,具体是哪个字体,这个就要看具体的浏览器设置了。

常见的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;
}

总结

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

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

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

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

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

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