如何优雅的选择字体(font-family)

   日期:2024-11-14     来源:网络整理    作者:佚名     移动:http://mapp.b2b-1.com/news/506394.html
核心提示:如何优雅的选择字体(font-family)Neue这款字体以保证最新版本Mac用户的最佳体验,选择了Arial作为Win下默认英文字体及Mac的替代英文字体;中文字体方面首选了微软雅黑,然后选择了冬青黑体及黑体-简作为Mac上的替代方案;最后使用文泉驿微米黑兼顾了Linux系统。

如何优雅的选择字体(font-family)

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

由于英文字体中大多不包含中文,我们可以先进行英文字体的声明114信息网MIP移动站,这样不会影响到中文字体的选择,因此优先使用最优秀的英文字体,中文字体声明则紧随其次。如下示例:

font-family: Arial, “Microsoft YaHei”;

###### 3、照顾不同的操作系统:

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

font-family: Helvetica, Tahoma, Arial;

- 中文部分:在Win下,微软雅黑为大部分人最常使用的中文字体,由于很多人安装Office的缘故,Mac电脑中也会出现微软雅黑字体,因此把显示效果不错的微软雅黑加入到字体列表是个不错的选择;同样,为了保证Mac中更为优雅字体苹方( SC)、黑体-简(Heiti SC)、冬青黑体( 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、注意向下兼容

如果还需要考虑旧版本操作系统用户的话如何优雅的选择字体(font-family),不得不加上一些旧版操作系统存在的字体:Mac中的华文黑体、冬青黑体微软雅黑和arial,Win中的黑体等。同样按照显示效果排列在列表后面,写法如下:

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

加入了 STXihei(华文细黑)和 SimHei(黑体)。

- 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;

#### 三、我们看一下大公司的常见写法(2016.07查看)

1、小米

font: 14px/1.5 “Helvetica Neue”,Helvetica,Arial,”Microsoft Yahei”,”Hiragino Sans GB”,”Heiti SC”,”WenQuanYi Micro Hei”,sans-serif;

小米公司优先使用 Neue这款字体以保证最新版本Mac用户的最佳体验,选择了Arial作为Win下默认英文字体及Mac的替代英文字体;中文字体方面首选了微软雅黑,然后选择了冬青黑体及黑体-简作为Mac上的替代方案;最后使用文泉驿微米黑兼顾了Linux系统。

2、淘宝

鉴于淘宝网改版频率较频繁,这里截图保存了一下,点此查看。

font: 12px/1.5 tahoma,arial,’Hiragino Sans GB’,’\5b8b\4f53’,sans-serif;

其实从图中明显看出淘宝网的导航及内容有着大量的衬线字体,鉴于淘宝网站大部分字号比较小,显示效果也还可以接受。代码中可以看出淘宝使用了Tahoma、Arial作为首选英文字体,中文字体首选了冬青黑体,由于Win下没有预装该款字体,所以显示出了后面的宋体(为汉字宋体用 unicode 表示的写法,不用SimSun是因为 Firefox 的某些版本和 Opera 不支持 SimSun的写法)

3、简书

font-family: “lucida grande”, “lucida sans unicode”, lucida, helvetica, “Hiragino Sans GB”, “Microsoft YaHei”, “WenQuanYi Micro Hei”, sans-serif;

自认为简书的阅读体验很棒,我们看看简书所用的字体,简书优先选择了lucida家族的系列字体作为英文字体,该系列字体在Mac和Win上都是预装的,并且有着不俗的表现;中文字体方面将冬青黑体作为最优先使用的字体,同样考虑了Linux系统。

各大公司的字体设置大同小异,这里不再一一举例查看,有兴趣的可以自己多多查看。

四、其他的一些注意点

1、字体何时需要添加引号

当字体具体某个取值中若有一种样式名称包含空格,则需要用双引号或单引号表示,如:

font-family: “Microsoft YaHei”, “Arial Narrow”, sans-serif;

如果书写中文字体名称为了保证兼容性也会添加引号,如:

font-family: “黑体-简”, “微软雅黑”, “文泉驿微米黑”;

2、引用外部字体

大多数的中文字体由于版权原因不能随意使用,这里推荐一个免版权而且漂亮的中文字体思源黑体微软雅黑和arial,该字体为Adobe与Google推出的一款开源字体, 有七种字体粗细(、Light、Normal、Regular、Medium、Bold 和 Heavy),完全支持日文、韩文、繁体中文和简体中文,字形优美,依稀记得小米公司好像有使用过。

鉴于中文字体的体积比较大(一般字库全一点的中文字体动辄几Mb),所以较少人会使用外部字体,如果真的需要引入,也可以考虑通过工具根据页面文字的使用多少单独生成中文字体,以减小文件大小。

五、最后,推荐写法

由于每个人的审美不一样,钟爱的字体也会有所有不同,这里给出我个人的常用写法:

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

另外推荐两个github上的关于中文字体和排版的项目:–参考资料

【本文来源于互联网转载,如侵犯您的权益或不适传播,请邮件通知我们删除】

免责声明:如何优雅的选择字体(font-family)来源于互联网,如有侵权请通知我们删除! (留言)
 
 
更多>同类行业资讯
0相关评论

图文信息
最新发布
行业资讯
最受欢迎
网站首页  |  网站地图  |  RSS订阅  |  违规举报  |  B2B-1.COM