网页开放字体格式(WOFF)

WOFF(网页开放字体格式) 是由 Mozilla 与 Type Supply, LettError 及其他组织协同开发的一种新的网页字体格式。它使用了一种压缩版本,类似于 TrueType, OpenType, Open Font 所采用的 SFNT 结构,不过还添加了共用数据及用户私有数据结构,其中包括了自定义空间,其允许厂家和经销商提供许可证。

WOFF 有以下三点优势:

  1. 字体采用压缩格式,相对于使用不压缩的 TrueType, OpenType 的网站,将占用更少的带宽,获得更快的加载速度。
  2. 许多字体经销商并不愿意将 TrueType 或 OpenType 的许可证颁发给网站,他们更愿意颁发 WOFF 的许可证。这对于网站开发者来说将是一个福音。
  3. 无论是收费还是免费的浏览器厂家都喜欢 WOFF 格式,因此它很可能成为未来的主流与跨平台字体格式。

使用 WOFF

通过 @font-face 这个 CSS 属性来为你的网站使用 WOFF 字体。它的工作方式与 OpenType 和 TrueType 十分相似,除了因使用压缩技术而使你的内容更快地加载。

相关工具

文档

文档 状态 注释
WOFF File Format 2.0 Recommendation 新压缩算法
WOFF File Format 1.0 Recommendation 原始规格

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@font-faceChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 4Opera Full support 10Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 2Samsung Internet Android Full support 1.0
SVG fonts
DeprecatedNon-standard
Chrome No support 1 — 38Edge No support NoFirefox No support NoIE No support NoOpera No support 15 — 25Safari Full support 3.2WebView Android No support ≤37 — 38Chrome Android No support 18 — 38Firefox Android No support NoOpera Android No support 14 — 25Safari iOS Full support 3Samsung Internet Android No support 1.0 — 3.0
WOFFChrome Full support 6Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 11.1Safari Full support 5.1WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11.1Safari iOS Full support 5Samsung Internet Android Full support 1.0
WOFF 2Chrome Full support 36Edge Full support 14Firefox Full support 39
Full support 39
Full support 35
Disabled
Disabled From version 35: this feature is behind the gfx.downloadable_fonts.woff2.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 23Safari Full support 10
Notes
Full support 10
Notes
Notes Supported only on macOS 10.12 (Sierra) and later.
WebView Android Full support 37Chrome Android Full support 36Firefox Android Full support 39
Full support 39
Full support 35
Disabled
Disabled From version 35: this feature is behind the gfx.downloadable_fonts.woff2.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10Samsung Internet Android Full support 3.0
font-displayChrome Full support 72Edge No support NoFirefox Full support 58IE No support NoOpera Full support 60Safari Full support 11.1WebView Android Full support 72Chrome Android Full support 72Firefox Android Full support 58Opera Android Full support 51Safari iOS Full support 11.3Samsung Internet Android No support No
font-familyChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 6Opera Full support 10Safari Full support 3.1WebView Android Full support 2.2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0
font-feature-settingsChrome No support NoEdge No support NoFirefox Full support 34
Notes
Full support 34
Notes
Notes The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.
Full support 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 34
Notes
Full support 34
Notes
Notes The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.
Full support 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
font-stretchChrome Full support 62Edge Full support 17Firefox Full support 62IE No support NoOpera Full support 49Safari Full support 10.1WebView Android Full support 62Chrome Android Full support 62Firefox Android Full support 62Opera Android Full support 41Safari iOS Full support 10.3Samsung Internet Android Full support 6.0
font-styleChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 4Opera Full support 10Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 2Samsung Internet Android Full support 1.0
font-variation-settingsChrome Full support 62Edge No support NoFirefox Full support 60
Disabled
Full support 60
Disabled
Disabled From version 60: this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 49Safari No support NoWebView Android Full support 62Chrome Android Full support 62Firefox Android Full support 60
Disabled
Full support 60
Disabled
Disabled From version 60: this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support 8.0
font-weightChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 4Opera Full support 10Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 2Samsung Internet Android Full support 1.0
srcChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 6Opera Full support 10Safari Full support 3.1WebView Android Full support 2.2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0
unicode-rangeChrome Full support 1Edge Full support 12Firefox Full support 36IE Full support 9Opera Full support YesSafari Full support 3.2WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 36Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见