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

2018-12-25  本文已影响0人  PixelEyes

引用地址:https://segmentfault.com/a/1190000006110417?utm_source=tag-newest

大家都知道，在不同操作系统、不同游览器里面默认显示的字体是不一样的，并且相同字体在不同操作系统里面渲染的效果也不尽相同，那么如何设置字体显示效果会比较好呢？下面我们逐步的分析一下：

一、首先我们看看各平台的默认字体情况

1、Window下：
2、Mac OS下：
3、Android系统：
4、iOS系统：
5、Linux：

二、选择字体需要注意的问题

1、字体的中英文写法：

我们在操作系统中常常看到宋体、微软雅黑这样的字体名称，但实际上这只是字体的显示名称，而不是字体文件的名称，一般字体文件都是用英文命名的，如SimSun、Microsoft Yahei。在大多数情况下直接使用显示名称也能正确的显示，但是有一些用户的特殊设置会导致中文声明无效。
因此，保守的做法是使用字体的字体名称（英文）或者两者兼写。如下示例：

font-family: STXihei, "Microsoft YaHei";
font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";
2、声明英文字体：

绝大部分中文字体里都包含英文字母和数字，不进行英文字体声明是没有问题的，但是大多数中文字体中的英文和数字的部分都不是特别漂亮，所以建议也对英文字体进行声明。
由于英文字体中大多不包含中文，我们可以先进行英文字体的声明，这样不会影响到中文字体的选择，因此优先使用最优秀的英文字体，中文字体声明则紧随其次。如下示例：

font-family: Arial, "Microsoft YaHei";
3、照顾不同的操作系统：
font-family: Helvetica, Tahoma, Arial;

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

加入了STXihei（华文细黑）和SimHei（黑体）。

5、补充字体族名称

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

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

三、我们看一下大公司的常见写法（2016.07查看）

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系统。

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

四、其他的一些注意点

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

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

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

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

font-family: "黑体-简", "微软雅黑", "文泉驿微米黑";
2、引用外部字体

大多数的中文字体由于版权原因不能随意使用，这里推荐一个免版权而且漂亮的中文字体思源黑体，该字体为Adobe与Google推出的一款开源字体， 有七种字体粗细（ExtraLight、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上的关于中文字体和排版的项目：

--参考资料

---------------------------分割线20181226更新---------------------------------------------------------------------

更新内容: 压缩外部字体库.
利用工具:字蛛
官方网站:http://font-spider.org/
1.安装

npm install font-spider -g

2.书写

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
 
#logo{
  font-family:'MyWebFont','PingFang SC','Helvetica Neue','Helvetica','STHeitiSC-Light',"Microsoft YaHei", Arial', sans-serif;
  font-size: 60px;
}

注意

从网上下载的字体库一般是 .ttf 格式.
要想兼容不同浏览器还需要相应的格式 IE浏览器对应 .eot 格式
我们需要把ttf文件转换成eot文件
有很多工具比如: ttf2eot
https://www.kirsle.net/wizards/ttf2eot.cgi (需要科学上网)
https://cloudconvert.com/ttf-to-eot (国内可以访问)
转换成eot格式,放到项目目录里就ok了

3.进行压缩

先定位到项目所在地址：cd + 项目地址；

执行font-spider:

font-spider  *.html

pixel@ubuntu:~/Desktop/workspace/项目目录$ font-spider *.html
Font family: PingFangSC-Semibold
Original size: 13580.208 KB
Include chars: ·交京信全公共北区台国平开录息易正海淀源登网诚资（）
Chars length: 26
Font id: dc64b984d07ec8ea495510226cb93d89
CSS selectors: .h-warp, .h2-warp
Font files:
File res/font/PingFang SC Semibold.ttf created: 6.7 KB

上面的代码执行过后,原来12MB的字体文件被压缩成了 6.7KB!!!
成功之后在你的项目文件中就会重新生成压缩后的文件了。
原文件会被复制到隐藏的目录中(.font-spider)

4.注意
使用时必须是静态页面，框架路径不会进行字体压缩
压缩文字必须在HTML页面中，不能识别通过js，ajax，jsonp添加的文字
css中必须选中HTML的文字，添加外部特定的字体。（font-spider是提取css中引入特殊字体在HTML标签中对应的文字）

上一篇 下一篇

猜你喜欢

热点阅读