首先,我们应该明确,并不是你设置了这种字体,用户电脑便会以这种字体显示。如果用户电脑没有安装这种字体,那么它便会以你设置的第二种字体来渲染。
而且由于设计稿和平台的不同,导致了制作有时候无法还原设计稿,理清各种平台字体区别,有助于做出最好的选择。
在不同操作系统、不同游览器里面默认显示的字体是不一样的,并且相同字体在不同操作系统里面渲染的效果也不尽相同,那么如何设置字体显示效果会比较好呢?
一、选择字体需要注意的问题
1、字体的中英文写法:
我们在操作系统中常常看到宋体、微软雅黑这样的字体名称,但实际上这只是字体的显示名称,而不是字体文件的名称,一般字体文件都是用英文命名的,如SimSun、Microsoft Yahei。在大多数情况下直接使用显示名称也能正确的显示,但是有一些用户的特殊设置会导致中文声明无效。
因此,保守的做法是使用字体的字体名称(英文)或者两者兼写。如下示例:
font-family: STXihei, "Microsoft 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, "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", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;
二、我们看一下大公司的常见写法
1、小米
font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","HeitiSC","WenQuanYi Micro Hei",sans-serif;
小米公司优先使用Helvetica Neue这款字体以保证最新版本Mac用户的最佳体验,选择了Arial作为Win下默认英文字体及Mac的替代英文字体;中文字体方面首选了微软雅黑,然后选择了冬青黑体及黑体-简作为Mac上的替代方案;最后使用文泉驿微米黑兼顾了Linux系统。
2、淘宝
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
其实从图中明显看出淘宝网的导航及内容有着大量的衬线字体,鉴于淘宝网站大部分字号比较小,显示效果也还可以接受。代码中可以看出淘宝使用了Tahoma、Arial作为首选英文字体,中文字体首选了冬青黑体,由于Win下没有预装该款字体,所以显示出了后面的宋体(5b8b4f53为汉字宋体用 unicode 表示的写法,不用SimSun是因为 Firefox 的某些版本和 Opera 不支持 SimSun的写法)
3、简书
font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;
自认为简书的阅读体验很棒,我们看看简书所用的字体,简书优先选择了lucida家族的系列字体作为英文字体,该系列字体在Mac和Win上都是预装的,并且有着不俗的表现;中文字体方面将冬青黑体作为最优先使用的字体,同样考虑了Linux系统。
三、附:css常用font-family
实例:
例1(小米米官网):
font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
例2(淘宝技术研发中心):
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
例3(加网 ):
font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;
例4(淘宝UED):
font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
例5(一淘UX):
font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
例6(简书):
font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
HTML,CSS,font-family:中文字体的英文名称:
1.通用:
- 宋体 SimSun
- 黑体 SimHei
- 微软雅黑 Microsoft YaHei
- 微软正黑体 Microsoft JhengHei
- 新宋体 NSimSun
- 新细明体 PMingLiU
- 细明体 MingLiU
- 标楷体 DFKai-SB
- 仿宋 FangSong
- 楷体 KaiTi
- 仿宋_GB2312 FangSong_GB2312
- 楷体_GB2312 KaiTi_GB2312
2.Mac OS的一些:
- 华文细黑:STHeiti Light [STXihei]
- 华文黑体:STHeiti
- 华文楷体:STKaiti
- 华文宋体:STSong
- 华文仿宋:STFangsong
- 儷黑 Pro:LiHei Pro Medium
- 儷宋 Pro:LiSong Pro Light
- 標楷體:BiauKai
- 蘋果儷中黑:Apple LiGothic Medium
- 蘋果儷細宋:Apple LiSung Light
3.Windows的一些:
- 新細明體:PMingLiU
- 細明體:MingLiU
- 標楷體:DFKai-SB
- 黑体:SimHei
- 新宋体:NSimSun
- 仿宋:FangSong
- 楷体:KaiTi
- 仿宋_GB2312:FangSong_GB2312
- 楷体_GB2312:KaiTi_GB2312
- 微軟正黑體:Microsoft JhengHei
- 微软雅黑体:Microsoft YaHei
4.装Office会生出来的一些:
- 隶书:LiSu
- 幼圆:YouYuan
- 华文细黑:STXihei
- 华文楷体:STKaiti
- 华文宋体:STSong
- 华文中宋:STZhongsong
- 华文仿宋:STFangsong
- 方正舒体:FZShuTi
- 方正姚体:FZYaoti
- 华文彩云:STCaiyun
- 华文琥珀:STHupo
- 华文隶书:STLiti
- 华文行楷:STXingkai
- 华文新魏:STXinwei
5.Windows 中的中文字体
在默认情况下,也就是未自行安装新字体或者 Office 等文字处理软件的情况下,Windows 默认提供下列字体:
-
Windows 95/98/98SE 宋体、黑体、楷体_GB2312、仿宋_GB2312
-
Windows XP/2000/2003/ME/NT 宋体/新宋体、黑体、楷体_GB2312、仿宋_GB2312 (Windows XP
SP3 宋体-PUA) -
Windows Vista/7/2008 宋体/新宋体、黑体、楷体、仿宋、微软雅黑、SimSun-ExtB
参考文章:
CSS字体font-family的正确选择方案:点击这里
css常用font-family:点击这里
部分摘选, 详情推荐大家阅读原文