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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。