Свойство CSS font-stretch
Добавить в избранное
Свойство font-stretch в CSS позволяет нам выбрать обычный, расширенный или сжатый шрифт из семейства шрифтов. Это свойство делает текст шире или уже по сравнению с шириной шрифта по умолчанию. Он не будет работать ни с одним шрифтом, а будет работать только с тем семейством шрифтов, которое имеет начертание, изменяющееся по ширине.
Это свойство CSS работает только для шрифтов с дополнительными начертаниями, такими как расширенные и сжатые начертания; в противном случае это не повлияет на шрифты, у которых нет сжатых или расширенных начертаний.
Значения свойств
normal
Это значение по умолчанию, которое не растягивает шрифт.
semi-condensed
Это немного уплотнило текстовые символы элемента. Это значение делает текст более узким, чем обычный , но не более узким, чем сжатый.
condensed
Это значение делает текст более узким, чем полуконденсированный, но не более узким, чем экстраконденсированный.
extra-condensed
Это значение делает текст более узким, чем сжатый , но не более узким, чем сверхсжатый.
ultra-condensed
Это значение делает текст чрезвычайно узким.
semi-expanded
Это немного расширило текстовые символы элемента. Это значение делает текст шире обычного , но не шире расширенного.
expanded
Это значение делает текст шире, чем полурасширенный, но не шире, чем экстра-расширенный.
extra-expanded
Это значение делает текст шире расширенного , но не сверхрасширенного.
ultra-expanded
Это значение делает текст чрезвычайно широким.
Давайте разберем приведенные выше значения свойств на примере.
Пример
<html>
<head>
<title>Document</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>
<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>