在此页

• 句法
• 规范
• 浏览器兼容性
• 相关话题

这是 实验性技术
检查 浏览器兼容性表格 要小心谨慎在生产中使用这之前。

display 特性为 FontFace interface determines how a font face is displayed based on whether and when it is downloaded and ready to use. This property is equivalent to the CSS font-display descriptor.

When this property is used, font loading has a timeline with three periods. The lengths of the first two periods depend on the value of the property and the user agent. (See below.)

block period

The browser invisibly prepares a fallback font. If the font face loads during this time, it's used to display the text and display is complete.

swap period

If the font face is still not loaded, the fallback font will be shown. When the font face loads, the fallback will be swaped for the downloaded font.

failure period

If the font face still is not loaded, the fallback font will be shown and no swap will occur.

句法

var display = FontFace.display
FontFace.display = display
					

值

A CSSOMString with one of the following values.

• 'auto' : Use the font display strategy provided by the user agent.
• 'block' : Gives the font face a short block period and an infinite swap period. The spec recommends 3 seconds for the block period, though this may vary from browser to browser.
• 'fallback' : Gives the font face a short block period and a short swap period. The spec recommends 100 ms or less for the block period and 3 seconds for the swap period, though these values may vary from browser to browser.
• 'optional' : Gives the font face a short block period and no swap period. The spec recommends 100 ms or less, though this may vary from browser to browser.
• 'swap' : Gives the font face a 0 second block period and an infinite swap period.

规范

规范	状态	注释
CSS Font Loading Module Level 3 The definition of 'display' in that specification.	工作草案	初始定义。
CSS Fonts Module Level 4 The definition of 'font-display' in that specification.	工作草案	Defines the values for the display property. (They are the same as for font-display )。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
display	Chrome 60	Edge 79	Firefox 58	IE ?	Opera 47	Safari 11	WebView Android 60	Chrome Android 60	Firefox Android 不支持 No	Opera Android 44	Safari iOS 不支持 No	Samsung Internet Android 8.0

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

元数据

• 最后修改： Jul 24, 2020

相关话题

1. CSS 字体加载 API
2. FontFace
3. 构造函数

   1. FontFace()
4. 特性

   1. display
   2. 系列
   3. featureSettings
   4. loaded
   5. status
   6. stretch
   7. style
   8. unicodeRange
   9. variant
   10. weight
5. 方法

   1. load
6. Related pages for CSS Font Loading API

   1. FontFaceSet
   2. FontFaceSetLoadEvent
   3. FontFaceSource