letter-spacing
letter-spacing CSS 屬性設定文字字元之間的水平間距行為。此值在渲染文字時會新增到字元的自然間距中。letter-spacing 的正值會使字元間距變寬，而負值會使字元間距變窄。
試一試
letter-spacing: normal;
letter-spacing: 0.2rem;
letter-spacing: 1px;
letter-spacing: -1px;
<section id="default-example">
<p id="example-element">
As much mud in the streets as if the waters had but newly retired from the
face of the earth, and it would not be wonderful to meet a Megalosaurus,
forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
@font-face {
src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
font-family: "Amstelvar";
font-style: normal;
}
section {
font-size: 1.2em;
font-family: "Amstelvar", serif;
}
語法
css
/* Keyword value */
letter-spacing: normal;
/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;
/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: revert;
letter-spacing: revert-layer;
letter-spacing: unset;
值
無障礙
過大或過小的 letter-spacing 值將使應用樣式後的單詞變得難以閱讀。對於應用了非常大正值的文字，字母會相距太遠，以至於單詞看起來像一系列獨立的、不連貫的字母。對於應用了非常大負值的文字，字母會相互重疊，以至於單詞可能無法識別。
易讀的字元間距必須根據具體情況確定，因為不同的字型家族具有不同的字元寬度。沒有一個值可以確保所有字型家族自動保持其易讀性。
國際化注意事項
某些書面語言不應應用任何字元間距。例如，使用阿拉伯語書寫的語言希望連貫的字母保持視覺上的連貫，如下例所示。應用字元間距會導致文字看起來支離破碎。
شسيبتنمك
正式定義
| 初始值 | normal |
|---|---|
| 應用於 | 所有元素。也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 是 |
| 計算值 | 由絕對長度或關鍵字 normal 組成的最優值 |
| 動畫型別 | 一個長度 |
正式語法
letter-spacing =
normal |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
示例
設定字元間距
HTML
html
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>
CSS
css
.normal {
letter-spacing: normal;
}
.em-wide {
letter-spacing: 0.4em;
}
.em-wider {
letter-spacing: 1em;
}
.em-tight {
letter-spacing: -0.05em;
}
.px-wide {
letter-spacing: 6px;
}
結果
規範
| 規範 |
|---|
| CSS Text Module Level 3 # letter-spacing-property |
| Scalable Vector Graphics (SVG) 2 # LetterSpacingProperty |
瀏覽器相容性
載入中…