前端字体使用

原文地址：https://segmentfault.com/a/1190000021472527
作者：Fw恶龙
本文首发于：思否

1. 常见字体格式

1.1 TrueType (.ttf)

由苹果和微软共同开发的一种计算机轮廓字体（曲线描边字）类型标准。

1.2 OpenType (.otf)

一种可缩放字体计算机字体类型，采用PostScript格式，微软与Adobe联合开发，用来替代TrueType字体的新字体。

1.3 Embedded Open Type (.eot)

嵌入式OpenType字体是被微软设计用来在网页使用的字体格式。该字体格式是OpenType字体的压缩格式。简单地把字体嵌入到网页中可能会导致受版权保护的字体在网络上肆意复制。所以嵌入式OpenType包括了一些特性来阻止复制行为。

1.4 Web Open Font Format (.woff)

Web开放字体格式是一种网页所采用的字体格式标准。由万维网联盟的Web字体工作小组标准化。此字体格式不但能够有效利用压缩来减少文件大小，且不包含加密也不受DRM（数字著作权管理）限制。

1.5 Scalable Vector Graphics Fonts (.svg)

SVG字体当前只在Safari和Android浏览器中受支持。IE还没有考虑实现它，Chrome 38（和Opera25）移除了这个功能，Firefox已经无限期推迟实施它以专心实现WOFF。.svgz是压缩版的.svg。

2. 前端字体使用场景

2.1 静态文字（即不通过JS动态改变）

1. 文字较少的情况可以使用图片的方式
2. 文字较多的情况可以使用 字蜘

2.2 动态文字

1. 在线字体库

   • 有字库

2. 引用字体文件
   在 CSS3 @font-face 规则中定义，然后方可使用。

       @font-face {
           font-family: <family-name>;                             //必选。自定义名称，如：syst、'syst bold'、"思源宋体"，含中文、空格、下划线等时加上单引号或双引号
           src: <src>;                                             //必选。字体文件的 URL
           unicode-range: <unicode-range>;                         //可选。关于该属性使用参考文末相关阅读
           font-variant: <font-variant>;                           //可选。未研究
           font-feature-settings: <font-feature-settings>;         //可选。未研究
           font-variation-settings: <font-variation-settings>;     //可选。未研究
           font-stretch: <font-stretch>;                           //可选。定义如何拉伸字体
           font-weight: <font-weight>;                             //可选。根据粗细引入不同字体文件，如果只需要normal则可以不用写，引用的字体文件在使用时若需要加粗，而没有在@规则中定义，是无效的
           font-style: <font-style>;                               //可选。但是在使用时可以定义斜体，而不需要引入斜体字体
       }
       
       eg.
       @font-face {
           font-family: 'source_han_serif_cnbold';
           src: url('bold-webfont.woff2') format('woff2'), url('bold-webfont.woff') format('woff');    //可以指定多个路径，关乎兼容性下文提到，format指定文件格式，对浏览器较友好
           font-weight: normal;
           font-style: normal;
       }
       
       .font {
           font-family: "source_han_serif_cnbold";
           font-size: 30px;
       }

3. 浏览器兼容性

• 如果你的项目无需兼容IE8浏览器，woff和woff2两个字体足够；
• IE8及以下仅支持.eot格式；
• IE9之前的版本没有按照标准解析字体声明，当src属性包含多个url时，它无法正确的解析而返回404错误，而其他浏览器会自动采用自己适用的url|文末评论

3.1 在线字体格式转换

• FONTsquirrel：转换生成.woff和.woff2文件，经测试中文字体会被过滤，只需要英文和数字的可以在此转换。
• 字客网：支持转换各种格式，支持中文。

参考文献

• 维基百科

相关阅读

• 张鑫旭|了解woff2字体及转换
• 张鑫旭|CSS unicode-range特定字符使用font-face自定义字体
• 大漠|CSS3 @font-face