合法合理的使用web 字体

头疼事儿

---

字体一直都是前端工程师很头疼的问题，如果参与过产品的设计和开发，会经常遇到这样的问题：
1、对比高保真和实现出来的网页，其他地方都很好的实现了，就字体最不给力
2、在Mac上很好看，在window上丑死，iPhone，andrord又不同

为什么会这样？
说到底，其幕后黑手就是系统。浏览器使用哪种字体，取决于你的系统安装了哪些字体（浏览器自身不带字体）或者工程师有没有让用户安装了某种字体

• Mac OS X 字体列表
• Windows 字体列表
• 开源字体列表

合法的使用

---

中文字体，几万个字形，往往需要字形设计师和工程师配合耗时几年的时间来做，成本可想而知，所以商业公司字体的售价一般都比较贵，不过很多字体公司都提供个人非商用的免费版本的字体（注意是个人非商业）。那
如果设计师在网站上运用了一款苹果的字体，window上没有这款字体，前端工程师怎么破？
1、直接做成图片嵌入到网页里？
No。这种做法我本人是有这样偷懒过的，既方便又省钱。但是我错了。

虽然字体在自己的机器上可以免费使用（那是因为苹果买的字体，你又买了苹果的机器，其实你是买过单的，而不是吃霸王餐），但是如果商业产品里做成图片给用户看的话那就涉及到字体的知识产权，你需要另外购买，即使这款字体在你的计算机和手机上已经有了。

可见，还是不可取的

2、使用相似字体作为替代
这个方案需要设计师和前端工程师对字体以及各个系统上的字体比较了解，有个网站很不错，提供了Mac和window上相似字体的替代方案，可以戳一戳它！戳我戳我

Paste_Image.png

3、使用Web Font 技术。
这个说辞是说给设计师听的，对于前端工程师来说，就是使用css3的@font-face。这个，个人建议自家设计师自己设计（避免了很多麻烦），当然可以使用第三方的，比如阿里巴巴，不过依然还是要注意字体的知识产权问题。如果您还不是很清楚开源、商用怎么区分，可以狠狠的点击一下：关于GPL协议的理解(开源与商用、免费与收费)

合理的使用

---

1、css中字体的分类
字体的分类有很多种，可以参考这个 Wiki Typeface
不过计算机上就基本五大款：css:fonts

• serif 衬线字体，如 Big Caslon, 宋体

Paste_Image.png

• sans-serif 非衬线字体，如 Helvetica, 黑体

Paste_Image.png

• monospace 等宽字体，如 Menlo

Paste_Image.png

• cursive 手写体，如 Comic Sans MS

Paste_Image.png

• fantasy 幻想体，如 Bodoni Ornamen

Paste_Image.png

2、CSS 中字体的 Fallback 机制
什么是Fallback 机制？给个图文说明，一看就懂

font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', sans-serif;

Paste_Image.png

这个 fallback 的规则可以总结为
(hasFont && isInUnicodeTable) ? 'Current Font' : 'Next Font'
就这样一直找匹配的字体，直到系统默认，所以一般都把系统默认的5类字体放到 font-family 定义的最后来写

那么，其先后顺序如何设定？没有统一的答案，但可以借鉴下面的站点：
国际化站点： Airbnb
国内站点： 、bootstrap
更多以后补充

web font 使用

---

Web Font 技术的出现使得用户不安装网页指定的字体也可以获得同样的显示效果成为可能。
1、兼容性
WebFont 技术支持的常见文件格式有以下几种：
EOT, TTF/OTF, WOFF, WOFF2, SVG
别问我为什么这么多格式，各家浏览器干的好事，想知道各个格式的兼容问题，可以戳一下 caniuse.com

2、css通用写法
好了，了解了兼容性问题，那下面的通用写法一看就懂了

@font-face { 
    font-family: ; 
    src:  ,[…]; 
    font-weight: ; 
    font-style: ; 
    font-stretch: ; 
    unicode-range:;
}

.text { font-family: '';}

3、转webfont
我想，如果还没入手的同学看到这，就蒙逼了，去哪获取到这么多的格式，用什么去获取？

• 情景1 ：你手头上有码（设计师提供了svg格式的图标给你了），将svg图标转为web font字体

狠狠的点击IconMoon App
只需要三步基本就搞定，这已经不是技术问题了，那就不多说了

Paste_Image.png

• 情景2 ：只需把部分中文字符做成 webfont 文件，要求文件大小小小小

铛铛铛铛，只要戳我 Font Spider 就能帮你解决了令人头大的文件大小问题

4、webfont 问题与优化

• 问题：
  字体文件的加载需要时间，各个浏览器对于字体加载渲染的过程也不同
• 解决：
  为了保证良好一致的用户体验，我们需要统一这个行为模式。你需要 webfontloader, 除了提供常用的第三方字体加载方式之外，最主要的功能是可以判断字体加载的各个阶段并赋予相应的 CSS 类来控制目标内容的样式。

html.wf-loading { visibility: hidden;}
html.wf-active,html.wf-inactive { visibility: visible;}

上面这段代码很容易阅读，即在字体加载时隐藏 html 内容，加载完成或失败时显示。
了解更加详细的可以点击：Google Webfont optimization

本文查阅的相关文档：

https://en.wikipedia.org/wiki/List_of_typefaces_included_with_OS_X
https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
https://en.wikipedia.org/wiki/Open-source_Unicode_typefaces
https://en.wikipedia.org/wiki/Typeface
http://www.cssfontstack.com/
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=en#optimizing-loading-and-rendering
http://www.cnblogs.com/Coding-net/p/5629680.html