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

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

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

字体属性

这个属性被应用于所有的元素，并且在本质上是可继承的，这意味着子元素的字体将与父元素的字体相同，除非另有规定。

构成字体速记属性的属性如下

Font-family – 它指定了将应用于文本的字体家族，你可以选择给出一个从左到右具有优先权的家族列表。
Font-size- 它用于控制字体或文本的大小。
Font-stretch – 你可以使用这个属性来设置字符面，它可以比正常字符更窄或更宽。
Font-style- 此属性指定字体是否应显示为粗体、斜体、下划线或删除线文本。
Font-variant – 控制字体的变体，并为连字符设置不同的值。
Font-weight – 这个属性设置文本显示的粗细。
Line-height – 用于设置文本的行间距离。

所有这些属性都有一个初始值，无论它们是作为字体速记属性的一部分使用还是单独使用。对于它们中的大多数来说，初始值是 “正常”，字体大小的默认值是 “中等”，而font-family的默认值则取决于用户的系统。

例子

下面给出了一个使用字体属性为文本设置样式的例子。

<!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-variation-settings中使用值apsz来代表光学尺寸变化轴。

当使用光学缩放时，较小的字体经常以较粗的笔画和较大的衬线来显示，而较大的文字则经常以较粗和较细的笔画之间的对比来产生更多的精致。

在指定此属性时，可以使用以下值 −

None — 当我们不需要光学修改的文本时，我们使用这个值。
Auto – 当我们必须根据屏幕尺寸调整字形时，浏览器会使用这个值。

除此以外，我们还可以使用全局值（继承、初始和未设置）作为该属性的值。

该属性的初始值默认为自动。它被应用于所有元素，也包括::首字母和::首行属性。它是一个可继承的值，由浏览器指定的值被用作其计算值。它有离散的动画类型。

例子

下面给出了一个使用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>

结论

总而言之，CSS中的font-optical-sizing属性是一个让文本在不同设备和分辨率上看起来更好的好方法。它允许你根据字体的用途来调整字体的大小，这可以帮助提高可读性，并在不同的屏幕上创造一个更一致的设计。通过利用这一功能，设计师能够确保他们的排版在任何设备上看起来都很好，而不需要为每个屏幕尺寸手动调整设置。