CSS 如何使用font-optical-sizing属性

在学习如何使用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”，字体大小的默认值是”medium”，而字体系列的默认值取决于用户的系统。

示例

下面是一个使用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>

示例

此示例使用inherit作为属性的值，该值是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>