font-optical-sizing

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本上运行。它从 2020 年 7 月.

报告反馈

尝试一下

语法

该font-optical-sizing CSS 属性设置文本渲染是否针对不同大小的视图进行优化。
/* keyword values */
font-optical-sizing: none;
font-optical-sizing: auto; /* default */

/* Global values */
font-optical-sizing: inherit;
font-optical-sizing: initial;
font-optical-sizing: revert;
font-optical-sizing: revert-layer;
font-optical-sizing: unset;

css

值

none

浏览器不会修改字形形状以优化视图。

auto

描述

浏览器会修改字形形状以优化视图。

对于具有光学尺寸变化轴的字体，默认情况下启用光学尺寸。光学尺寸变化轴在 font-variation-settings 中表示为 opsz。

正式定义

当使用光学尺寸时，小文本尺寸通常以更粗的笔划和更大的衬线渲染，而大文本尺寸通常以更精致的方式渲染，笔划之间的粗细对比更强烈。浏览器不会修改字形形状以优化视图。
初始值适用于
所有元素和文本。它也适用于 ::first-letter 和 ::first-line。继承
是计算值
如指定动画类型

正式语法

font-optical-sizing = 
  auto  |
  none

例子

离散

禁用光学尺寸
<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-optical-sizing CSS 属性设置文本渲染是否针对不同大小的视图进行优化。
@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;
}

html

规范

注意：上面引用的字体——包括光学尺寸并且是自由许可的——适用于测试。您可以 在 GitHub 上下载它。
规范
# CSS 字体模块级别 4

浏览器兼容性

font-optical-sizing-def

另请参阅