CSS font-stretch屬性用法及代碼示例

CSS 中的 font-stretch 屬性允許我們從字體係列中選擇普通的、擴展的或壓縮的字體。此屬性將文本設置為與字體的默認寬度相比更寬或更窄。它不適用於任何字體，但僅適用於具有 width-variant 字體的 font-family。

此 CSS 屬性僅適用於具有擴展麵和壓縮麵等附加麵的字體；否則，對於沒有壓縮或擴展麵的字體將無影響。

以下語法給出了用於選擇 font-face 寬度的九個關鍵字值。

用法

font-stretch:normal | semi-condensed | condensed | extra-condensed | ultra-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

屬性值

此 CSS 屬性的屬性值列表如下：

關鍵字	描述
normal	這是默認值，不會拉伸任何字體。
semi-condensed	它稍微壓縮了元素的文本字符。此值使文本比正常更窄，但不會比壓縮更窄。
condensed	該值使文本比 semi-condensed 窄，但不比 extra-condensed 窄。
extra-condensed	該值使文本比 condensed 窄，但不比 ultra-condensed 窄。
ultra-condensed	該值使文本極度縮小。
semi-expanded	它稍微加寬了元素的文本字符。此值使文本比正常更寬，但不會比擴展更寬。
expanded	該值使文本寬於 semi-expanded 但不寬於 extra-expanded。
extra-expanded	該值使文本寬度大於展開但不大於 ultra-expanded。
ultra-expanded	該值使文本非常寬。

讓我們通過一個例子來理解上麵的屬性值。

示例

<!DOCTYPE html>
<html>
<head>
<title>
CSS font-stretch Property
</title>

<style>
body{
text-align:center;
}
div{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:blue;
}
.normal {
font-stretch:normal;
}
.semi-condensed {
font-stretch:semi-condensed;
}
.condensed {
font-stretch:condensed;
}
.extra-condensed {
font-stretch:extra-condensed;
}
.ultra-condensed {
font-stretch:ultra-condensed;
}

.semi-expanded {
font-stretch:semi-expanded;
}

.expanded {
font-stretch:expanded;
}
.extra-expanded {
font-stretch:extra-expanded;
}

.ultra-expanded {
font-stretch:ultra-expanded;
}
</style>
</head>

<body>
<h1> Example of the font-stretch property </h1>
<div class = "normal">
normal
</div>

<div class = "semi-condensed">
semi-condensed
</div>
<div class = "condensed">
condensed
</div>

<div class = "extra-condensed">
extra-condensed
</div>

<div class = "ultra-condensed">
ultra-condensed
</div>
<div class = "semi-expanded">
semi-expanded
</div>

<div class = "expanded">
expanded
</div>

<div class = "extra-expanded">
extra-expanded
</div>

<div class = "ultra-expanded">
ultra-expanded
</div>
</body>

</html>

輸出

相關用法

注：本文由純淨天空篩選整理自 CSS font-stretch property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。