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 ?。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。