CSS font-optical-sizing属性用法及代码示例

无论我们现在制作什么 Web 应用程序或网站，我们都确保它与所有屏幕尺寸兼容。所以 CSS 带有 font-optical-sizing 属性，它设置正在呈现的文本是否针对不同的屏幕尺寸进行了优化。它允许浏览器调整字体字形的轮廓，使它们在不同大小下更适合。

如果字体支持 font-optical-sizing 属性，那么使用这将是对其进行光学大小调整的最有效方法。如果我们说支持这个属性的字体，那么我们可以说所有的可变字体都支持这个属性。对于那些具有光学尺寸变化轴的字体，默认情况下会自动启用光学尺寸。

用法:

font-optical-sizing 属性的语法如下。

font-optical-sizing:value;

属性值：此属性接受如下所述的属性值。

keyword_values: 该属性的值是指“auto”、“none”等定义的值。
global_values:该属性的值是指 “inherit”、“initial”、“unset” 定义的值。

范例1：下面的示例说明了使用属性值“auto”的 font-optical-sizing 属性的使用。网页会自行调整以保持字形或字符的形状，以获得最佳观看效果。

HTML


<!DOCTYPE html>
<html>
  
<head>
  <style type="text/css">
    p { 
      color:green;
      padding:5px;
      font-weight:bold;
      font-optical-sizing:auto;
     }
  </style>
</head>
<body>
  <p>Hello GeeksforGeeks!</p>
</body>
  
</html>

输出：

自动设置

范例2：下面是使用值“initial”说明 font-optical-sizing 属性的示例。

HTML


<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    p { 
      color:green;
      padding:6px;
      font-weight:bold;
      font-style:italic;
      font-optical-sizing:initial;
     }
    </style>
</head>
    
<body>
  <p>Welcome to this Computer Science portal</p>
</body>  
</html>

输出：

初始设置

相关用法

注：本文由纯净天空筛选整理自cyber_psych0大神的英文原创作品 How to use font-optical-sizing property in CSS ?。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。