前端字体使用

时间 2020-01-03

标签前端字体使用繁體版

原文原文链接

1. 常见字体格式

1.1 TrueType (.ttf)

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

1.2 OpenType (.otf)

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

1.3 Embedded Open Type (.eot)

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

1.4 Web Open Font Format (.woff)

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

1.5 Scalable Vector Graphics Fonts (.svg)

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

2. 前端字体使用场景

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

文字较少的状况可使用图片的方式
文字较多的状况可使用字蜘

2.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文件，经测试中文字体会被过滤，只须要英文和数字的能够在此转换。
字客网：支持转换各类格式，支持中文。

参考文献

维基百科