font-stretch屬性用來將字體在水平方向上進行拉伸或壓縮，讓一種字體的字符更寬或更窄。如果水平壓縮，則字體變窄，如果水平拉伸，則字體變寬。
就像 font-size 屬性的預定義關鍵字（如xx-large）一樣，該屬性也有一系列預定義關鍵字，這些關鍵字可以是normal、或condensed、或expanded，默認值為 normal，表示不進行拉伸或壓縮。
這些關鍵字的值按照以下順序，字體依次由窄到寬：ultra-condensed、extra-condensed、condensed、semi-condensed、normal、semi-expanded、expanded、extra-expanded、ultra-expanded。
CSS中的font-stretch屬性用于將文本設置為較寬或較窄。此屬性不能使用任何字體。它僅在字體系列具有width-variant字體時起作用。
用法：
font-stretch:normal|ultra-condensed|extra-condensed|condensed|
semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded;
屬性值：
- normal:它是默認字體。它不會拉伸字體。
- ultra-condensed：它用于指定比常規字體更簡潔的字體。
- extra-condensed：它用于將文本設置為比普通文本窄，而不比ultra-condensed窄。
- condensed:它用于設置比semi-condensed窄的文本，而不是比extra-condensed窄的文本。
- semi-condensed：它用于將文本設置為比普通文本窄，而不比semi-condensed窄。
- semi-expanded：它用于將文本設置為比普通文本寬，但不設置為寬然后擴展。
- expanded：它用于設置文本寬于semi-expended，但不寬于extra-expanded。
- extra-expanded：它用于將文本設置為比擴展寬，但不能比ultra-expanded寬。
- ultra-expanded：它用于設置比ultra-expended寬的文本。
例：
<!--HTML code to illustrate font-stretch
Property -->
<!DOCTYPE html>
<html>
<head>
<title>
CSS font-stretch Property
</title>
<style>
.normal {
font-stretch:normal;
}
.ultra_condensed {
font-stretch:ultra-condensed;
}
.extra_condensed {
font-stretch:extra-condensed;
}
.condensed {
font-stretch:condensed;
}
.extra_condensed {
font-stretch:extra-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>
<div class = "normal">
GeeksforGeeks:A computer science portal
</div>
<div class = "ultra_condensed">
GeeksforGeeks:A computer science portal
</div>
<div class = "extra_condensed">
GeeksforGeeks:A computer science portal
</div>
<div class = "condensed">
GeeksforGeeks:A computer science portal
</div>
<div class = "extra_condensed">
GeeksforGeeks:A computer science portal
</div>
<div class = "semi_expanded">
GeeksforGeeks:A computer science portal
</div>
<div class = "expanded">
GeeksforGeeks:A computer science portal
</div>
<div class = "extra_expanded">
GeeksforGeeks:A computer science portal
</div>
<div class = "ultra_expanded">
GeeksforGeeks:A computer science portal
</div>
</body>
</html>
輸出：
注意：此屬性不適用于任何字體。
支持的瀏覽器：下面列出了font-stretch屬性支持的瀏覽器：
- 谷歌瀏覽器48.0
- Internet Explorer 9.0
- Firefox 9.0
- Opera 35.0
- Safari 11.0
該文章在 2022/12/22 21:05:27 編輯過
400 186 1886
