CSS font-stretch
CSS中的
font-stretch 属性允许我们选择
常规，扩展，或字体族的
精简字样。与字体的默认宽度相比，此属性将文本设置为更宽或更窄。
以下语法提供了用于选择字体宽度的九个关键字值。
语法
font-stretch: wider|narrower|ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|inherit;
属性值
<身体>
| 关键字 |
说明 |
| wider |
使得文本更宽。 |
| narrower |
使得文本窄。 |
| normal |
这是默认值，不会拉伸任何字体。 |
| semi-condensed |
它稍微压缩元素的文本字符。此值使文本比普通窄。 |
| condensed |
此值使文本比semi-condensed窄。 |
| extra-condensed |
此值使文本比condensed窄。 |
| ultra-condensed |
此值使文本非常狭窄。 |
| semi-expanded |
它稍微扩大了元素的文本字符。此值使文本比普通宽。 |
| expanded |
此值使文本宽于semi-expanded。 |
| extra-expanded |
此值使文本宽于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>
输出
