详解font-family的正确用法

发布时间:2019-07-30 11:08:26 阅读:53
CSS属性font-family允许您通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体,其中属性的值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体,或者是通过 @font-face 指定的可以直接下载的字体。

在不同操作系统、不同览器里面默认显示的字体是不一样的,并且相同字体在不同操作系统里面渲染的效果也不尽相同。

有很多的开发者通常会使用"微软雅黑"来当作默认的字体,而这样就会出现一个问题:英文系统可能没有安装该字体,从而不会显示更佳的显示效果。

如何设置正确的中英文字体

1、中文字体写法

我们在操作系统中常常看到宋体、微软雅黑这样的字体名称,但实际上这只是字体的显示名称,而不是字体文件的名称,一般字体文件都是用英文命名的,如SimSunMicrosoft Yahei。在大多数情况下直接使用显示名称也能正确的显示,但是有一些用户的特殊设置会导致中文声明无效。

因此,最佳的方法是使用字体的名称来书写。

	font-family: STXihei, "Microsoft YaHei";  //华文细黑, 微软雅黑 

2、英文字体写法

绝大部分中文字体里都包含英文字母和数字,不进行英文字体声明是没有问题的,但是大多数中文字体中的英文和数字的部分都不是特别漂亮,所以建议也对英文字体进行声明。

由于英文字体中大多不包含中文,我们可以先进行英文字体的声明,这样不会影响到中文字体的选择,因此优先使用最优秀的英文字体,中文字体声明则紧随其次。

	font-family: Arial, "Microsoft YaHei"; 

3、兼容不同的操作系统

英文、数字部分:在默认的操作系统中,Mac和Win都会带有Arial, Verdana, Tahoma等几个预装字体,从显示效果来看,Tahoma要比Arial更加清晰一些,因此字体设置Tahoma最好放到前面,当找不到Tahoma时再使用Arial;而在Mac中,还拥有一款更加漂亮的Helvetica字体,所以为了照顾Mac用户有更好的体验,应该更优先设置Helvetica字体;Android系统下默认的无衬线字体就可以接受,因此无需单独设置。最后,英文、数字字体的最佳写法如下:

	font-family: Helvetica, Tahoma, Arial; 

中文部分:在Win下,微软雅黑为大部分人最常使用的中文字体,由于很多人安装Office的缘故,Mac电脑中也会出现微软雅黑字体,因此把显示效果不错的微软雅黑加入到字体列表是个不错的选择;同样,为了保证Mac中更为优雅字体苹方(PingFang SC)黑体-简(Heiti SC)冬青黑体( Hiragino Sans GB )的优先显示,需要把这些字体放到中文字体列表的最前面;同时为了照顾到Linux操作系统的体验,还需要添加文泉驿微米黑字体。

	font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei"; 

结合起来就是:

	font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei"; 

4、向下兼容

如果还需要考虑旧版本操作系统用户的话,不得不加上一些旧版操作系统存在的字体:Mac中的华文黑体冬青黑体,Win中的黑体等。同样按照显示效果排列在列表后面,写法如下:

	font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei"; 

5、补充字体族名称

字体族大体上分为两类:sans-serif(无衬线体)和serif(衬线体),当所有的字体都找不到时,我们可以使用字体族名称作为操作系统最后选择字体的方向。一般非衬线字体在显示器中的显示效果会比较好,因此我们需要在最后添加 sans-serif,写法如下:

	font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 

总结:使用font-family时,不建议直接书写中文名称比如"微软雅黑"、"宋体"等等;推荐顺序为先书写英文字体,后面为中文字体,末尾加上sans-serif来作为系统没有以上字体时最后的字体选择。

引用链接:如何优雅的选择字体(font-family)

我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"详解font-family的正确用法",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560