如何在 CSS 中使用 font-optical-sizing 屬性？-css教學-PHP中文網

字體屬性

範例

什麼是字體光學大小？

結論

首頁

web前端

css教學

如何在 CSS 中使用 font-optical-sizing 屬性？

PHPz

Aug 27, 2023 pm 08:49 PM

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

在學習如何使用font-optical-sizing屬性之前，我們先來看看CSS中的font屬性以及為什麼需要將font-optical-sizing作為一個單獨的屬性。

網頁上文字的樣式由CSS中的font屬性控制，它是許多其他屬性的簡寫形式。它可以用於將系統字體應用於元素，或為其他CSS屬性設定不同的值。

字體屬性

此屬性適用於所有元素，並且本質上是可繼承的，這表示子元素的字體將與父元素的字體相同，除非另有指定。

構成字型速記屬性的屬性如下 -

Font-family - 它指定將套用於文字的字體系列，您可以選擇提供具有優先順序的系列清單從左到右。
字體大小 − 用於控製字體或文字的大小。
字體拉伸 − 您可以使用此屬性來設定字元面，這些字元面可以比正常字元更窄或更寬。
字體樣式 − 此屬性指定字體是否應以粗體、斜體、底線或刪除線文字顯示
#Font-variant - 控製字體變體並為連字設定不同的值。
Font-weight - 此屬性設定文字顯示的粗體程度。
行高- 用於設定文字行之間的距離。

所有這些屬性，無論是作為字體速記屬性的一部分還是單獨使用，都有一個初始值。對於大多數來說，初始值是“正常”，字體大小的預設值是“中”，而字體系列的預設值取決於使用者的系統。

範例

下面給出一個使用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>

登入後複製

什麼是字體光學大小？

CSS 有一個 font-optical-sizing 屬性，用於確定產生的文字是否針對各種螢幕尺寸進行最佳化。瀏覽器可以更改字體字形的輪廓，使其在各種尺寸下更清晰。

如果字體支援字體光學調整大小，對我們來說非常有優勢。這樣我們可以確保文字始終適應使用者使用的螢幕。大多數可變字體系列都支援此屬性。當字體擁有光學大小變化軸時，光學調整大小會自動啟用。我們使用字體變體設定中的opsz值來表示光學大小變化軸。

使用光學縮放時，較小的字體尺寸通常會顯示為較粗的筆劃和較大的襯線，而較大的文字通常會顯示得更精緻，較粗和較細的筆劃之間的對比度更大。

在指定此屬性時，可以使用下列值 -

None − 當我們不需要光纖修改的文字時，我們使用此值。
自動 - 當我們必須根據螢幕尺寸調整字形形狀時，瀏覽器將使用此值。

除此之外，我們還可以將全域值（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 屬性是讓文字在不同裝置和解析度上看起來更好的好方法。它允許您根據預期用途調整字體的大小，這有助於提高可讀性並在不同螢幕上創建更一致的設計。透過利用此功能，設計人員能夠確保他們的版式無論在什麼設備上查看都看起來很棒，而無需手動調整每個螢幕尺寸的設定。

以上是如何在 CSS 中使用 font-optical-sizing 屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn