在此页

• 句法
• 描述
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 相关话题

font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

句法

/* keyword values */
font-optical-sizing: none;
font-optical-sizing: auto; /* default */
/* Global values */
font-optical-sizing: inherit;
font-optical-sizing: initial;
font-optical-sizing: unset;
					

值

none

The browser will not modify the shape of glyphs for optimal viewing.

auto

The browser will modify the shape of glyphs for optimal viewing.

描述

Optical sizing is enabled by default for fonts that have an optical size variation axis. The optical size variation axis is represented by opsz in font-variation-settings .

When optical sizing is used, small text sizes are often rendered with thicker strokes and larger serifs, whereas larger text is often rendered more delicately with more contrast between thicker and thinner strokes.

形式定义

初始值	auto
适用于	所有元素。它还适用于 ::first-letter and ::first-line .
继承	yes
计算值	如指定
动画类型	discrete

形式句法

auto | none
					

范例

Disabling optical sizing

<p class="optical-sizing">This paragraph is optically sized.
 This is the default across browsers.</p>
<p class="no-optical-sizing">This paragraph is not optically sized.
 You should see a difference in supporting browsers.</p>
					

@font-face {
    src: url('AmstelvarAlpha-VF.ttf');
    font-family:'Amstelvar';
    font-style: normal;
}
p {
  font-size: 36px;
  font-family: Amstelvar;
}
.no-optical-sizing {
  font-optical-sizing: none;
}
					

注意 : The font referenced above — which includes optical sizing and is freely-licensed — is good for testing. You can download it on GitHub .

规范

规范	状态	注释
CSS Fonts Module Level 4 The definition of 'font-optical-sizing' in that specification.	工作草案

浏览器兼容性

The compatibility table in 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 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
font-optical-sizing	Chrome 完整支持 79	Edge 完整支持 17	Firefox 完整支持 62 完整支持 62 不支持 60 — 62 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 66	Safari 完整支持 11	WebView Android 完整支持 79	Chrome Android 完整支持 79	Firefox Android 完整支持 62 完整支持 62 不支持 60 — 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 完整支持 11	Samsung Internet Android 完整支持 12.0

图例

完整支持

完整支持

不支持

不支持

用户必须明确启用此特征。

用户必须明确启用此特征。

元数据

• 最后修改： Aug 7, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS 字体
4. 指南

   1. OpenType font features guide
   2. Variable fonts guide
5. At-Rules

   1. @font-face
   2. @font-feature-values
6. 特性

   1. font
   2. font-family
   3. font-feature-settings
   4. font-kerning
   5. font-language-override
   6. font-optical-sizing
   7. font-size
   8. font-size-adjust
   9. font-smooth
   10. font-stretch
   11. font-style
   12. font-synthesis
   13. font-variant
   14. font-variant-alternates
   15. font-variant-caps
   16. font-variant-east-asian
   17. font-variant-ligatures
   18. font-variant-numeric
   19. font-variant-position
   20. font-variation-settings
   21. font-weight
   22. line-height
   23. line-height-step