如何在 CSS 中使用 font-optical-sizing 属性?

cssweb developmentfront end technology更新于 2025/2/13 0:12:17

在学习如何使用 font-optical-sizing 属性之前，我们首先来了解一下 CSS 中的 font 属性，以及为什么需要将 font-optical-sizing 作为一个单独的属性。

网页上的文本样式由 CSS 中的 font 属性 控制，该属性是许多其他属性的简写。它可用于将系统字体应用于元素，或为其他 CSS 属性设置不同的值。

字体属性

此属性应用于所有元素，并且本质上可继承，这意味着除非另有说明，否则子元素的字体将与父元素的字体相同。

组成字体简写属性的属性如下 -

Font-family - 它指定将应用于文本的字体系列，您可以选择提供一个字体系列列表，该列表具有从左到右的优先级。
Font-size - 它用于控制字体或文本的大小。
Font-stretch - 您可以使用此属性设置字符字体，使其比正常字符更窄或更宽。
Font-style − 此属性指定字体是否显示为粗体、斜体、下划线或删除线文本。
Font-variant − 控制字体变体并为连字设置不同的值。
Font-weight − 此属性设置文本的粗体显示程度。
Line-height − 用于设置文本行之间的距离。

所有这些属性都有一个初始值，无论它们是作为字体简写属性的一部分使用还是单独使用。大多数字体的初始值为"normal"，font-size 的默认值为"medium"，font-family 的默认值取决于用户的系统。

示例

下面给出了一个使用 font 属性设置文本样式的示例。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Various font styles</title>
</head>
<body>
   <p style="font:caption">This text will be displayed as a caption.</p>
   <p style="font:icon">This text will be displayed as an icon.</p>
   <p style="font:menu">This text will be displayed as a menu.</p>
   <p style="font:message-box">This text will be displayed as message-box</p>
   <p style="font:small-caption">This text will be displayed as a smaller form of caption.</p>
   <p style="font:status-bar">This text will be displayed as status bar.</p>
   <p style="font: bold;">This will be bold</p>
   <p style="font-size: large;">This will have larger font size.</p>
</body>
</html>

什么是 font-optical-sizing?

CSS 有一个 font-optical-sizing 属性，用于确定生成的文本是否针对各种屏幕尺寸进行了优化。浏览器可以更改字体字形的轮廓，使其在各种尺寸下都更清晰易读。

如果字体支持 font-optical-sizing，对我们来说非常有利。这样，我们可以确保文本始终根据用户使用的屏幕进行调整。大多数可变字体系列都支持此属性。当字体具有光学尺寸变化轴时，光学尺寸调整将自动启用。我们使用 font-variation-settings 中的值 opsz 来表示光学尺寸变化轴。

使用光学缩放时，较小的字体大小通常会显示较粗的笔画和较大的衬线，而较大的文本通常会显示得更细腻，粗细笔画之间的对比度更高。

指定此属性时可以使用以下值 -

None - 当我们不需要视觉修改文本时，我们会使用此值。
Auto - 当浏览器需要根据屏幕大小调整字形形状时，浏览器会使用此值。

除此之外，我们还可以使用全局值(inherit、initial 和 unset)作为此属性的值。

此属性的初始值默认为 auto。它会应用于所有元素，也包括 ::first-letter 和 ::first-line 属性。它是一个可继承的值，浏览器指定的值将用作其计算值。它具有离散动画类型。

示例

下面给出了一个使用 auto 作为此属性值的示例。

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
      p {
         padding: 3%;
         font-weight: 700;
         font-optical-sizing: auto;
      }
   </style>
</head>
<body>
   <p>This text will be optically modified for all screen sizes.</p>
</body>
</html>

示例

此示例使用继承作为属性的值，它是我们在 CSS 中可以使用的三个全局属性之一。

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
   p {
      padding: 3%;
      font-weight: 700;
      font-optical-sizing: inherit;
   }
   </style>
</head>
<body>
   <p>This text will be optically modified for all screen sizes using inherit as its value.</p>
</body>
</html>

结论

总而言之，CSS 中的 font-optical-sizing 属性是让文本在不同设备和分辨率下呈现更佳效果的绝佳方法。它允许您根据字体的预期用途调整其大小，从而有助于提高可读性，并在不同屏幕上创建更一致的设计。通过利用此功能，设计师可以确保其排版无论在何种设备上显示都呈现出色的效果，而无需针对每种屏幕尺寸手动调整设置。