CSS教程
CSS进阶

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;

属性值

CSS 属性的属性值是列表如下:
<身体>
关键字 说明
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>
输出
 CSS font-stretch属性
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4