font-smooth
非標準：此特性未標準化。我們不建議在生產環境中使用非標準特性，因為它們瀏覽器支援有限，並且可能會更改或被移除。但是，在沒有標準選項的特定情況下，它們可以是合適的替代方案。
font-smooth CSS 屬性控制字型渲染時抗鋸齒的應用。
語法
css
/* Keyword values */
font-smooth: auto;
font-smooth: never;
font-smooth: always;
/* <length> value */
font-smooth: 2em;
/* Global values */
font-smooth: inherit;
font-smooth: initial;
font-smooth: revert;
font-smooth: revert-layer;
font-smooth: unset;
注意： WebKit 實現了一個類似的屬性，但值不同：-webkit-font-smoothing。它只在 macOS 上有效。
auto- 讓瀏覽器決定（可用時使用亞畫素抗鋸齒；這是預設值）none- 關閉字型平滑；顯示帶有鋸齒狀銳利邊緣的文字。antialiased- 在畫素級別而不是亞畫素級別平滑字型。將深色背景上的淺色文字從亞畫素渲染切換到抗鋸齒，會使其看起來更淺。subpixel-antialiased- 在大多數非 Retina 顯示器上，這將提供最清晰的文字。
注意： Firefox 實現了一個類似的屬性，但值不同：-moz-osx-font-smoothing。它只在 macOS 上有效。
auto- 允許瀏覽器選擇字型平滑的最佳化，通常是grayscale。grayscale- 使用灰度抗鋸齒而不是亞畫素渲染文字。將深色背景上的淺色文字從亞畫素渲染切換到抗鋸齒，會使其看起來更淺。
正式定義
正式語法
font-smooth =
auto |
never |
always |
<absolute-size> |
<length>
示例
基本用法示例
以下示例顯示了 Safari/Chromium 和 Firefox 在 macOS 上啟用字型平滑的等效效果。在這兩種情況下，平滑的字型在視覺上應該會顯得稍輕。
對於不在 macOS 系統上的使用者，這裡有一個截圖（即時版本稍後顯示）
HTML
html
<p>Without font smoothing</p>
<p class="smoothed">With font smoothing</p>
CSS
css
html {
background-color: black;
color: white;
font-size: 3rem;
}
p {
text-align: center;
}
.smoothed {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
結果
規範
不屬於任何標準。
瀏覽器相容性
載入中…
另見
- 請停止“修復”字型平滑 作者：Dmitry Fadeyev (2012)
- 自由放任的字型平滑和抗鋸齒 作者：Zach Leatherman (2017)