font-stretch | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 9.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.
Синтаксис
font-stretch: inherit | ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded
Значения
Влияние разных значений font-stretch на вид букв в тексте показано на рис. 1.
Рис. 1. Вид букв при разных значениях font-stretch
Пример
HTML5CSS3IE 9CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-stretch</title>
<style>
p {
font-size: 5em;
font-family: 'Myriad Pro';
}
</style>
</head>
<body>
<p>
<span>Б</span>
<span>Б</span>
<span>Б</span>
<span>Б</span>
<span>Б</span>
<span>Б</span>
<span>Б</span>
<span>Б</span>
<span>Б</span>
</p>
</body>
</html>
Браузеры
Браузеры применяют свойство font-stretch не ко всем шрифтам, поэтому уплотнение или расширение текста может не работать с некоторыми популярными и распространёнными гарнитурами шрифтов.
htmlbook.ru
CSS свойство font-stretch | назначение, допустимые значения, примеры
Свойство font-stretch выбирает нормальную, уплотненную или расширенную ширину символов в шрифте.
Допустимые значения
- normal — обычная ширина символов в шрифте
- semi-condensed — узковатая ширина символов в шрифте
- condensed — узкая ширина символов в шрифте
- extra-condensed — очень узкая ширина символов в шрифте
- ultra-condensed — самая узкая ширина символов в шрифте
- narrower — ширина символов в шрифте уже, чем у родительского элемента
- semi-expanded — широковатая ширина символов в шрифте
- expanded — широкая ширина символов в шрифте
- extra-expanded — очень широкая ширина символов в шрифте
- ultra-expanded — самая широкая ширина символов в шрифте
- wider — ширина символов в шрифте шире, чем у родительского элемента
- inherit — ширина символов в шрифте такая же как у родительского элемента
Абсолютные значения, перечисленные от самого узкого до самого широкого: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded.
Относительное значение wider расширяет ширину буквы на один пункт из вышеперечисленного списка, т.е. если у родителя font-stretch имеет абсолютное значение semi-expanded, а у дочернего элемента задано относительное значение wider, то абсолютным значением font-stretch у дочернего элемента будет expanded.
Аналогично, относительное значение narrower сужает ширину буквы на один пункт.
| Значение по умолчанию | normal |
|---|---|
| Применимо | ко всем элементам |
| Наследование | да |
| Версия CSS | CSS 3 |
| Поддерживается браузерами |
Пример
p {
font-stretch:wider;
}
Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— p{ font:italic bold 16px Arial, sans-serif; } .exr{ font-stretch:ultra-expanded; } .cond{ font-stretch:ultra-condensed; } —> </style> </head> <body> <p>Это текст с обычной толщиной букв</p> <p>Это текст с самой широкой толщиной букв</p> <p>Это текст с самой узкой толщиной букв</p> </body> </html>Сделай код и жми тут
Результат:
большой полигонЗаметки
Это свойство относится к модулю CSS Fonts Module Level 3 находящемся в разработке W3C, поэтому в нем возможны изменения.
На момент написания статьи это свойство не поддерживается ни одним из распространенных браузеров.
Свойство font-style Свойство font-size-adjusthtml-css-php-js.ru
letter-spacing | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.
Синтаксис
letter-spacing: значение | normal | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex).
- normal
- Задает интервал между символами как обычно.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>letter-spacing</title>
<style>
p {
letter-spacing: 5px;
}
</style>
</head>
<body>
<h2>Duis te feugifacilisi</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства letter-spacing
Объектная модель
[window.]document.getElementById(«elementID»).style.letterSpacing
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
htmlbook.ru
font-stretch | CSS | WebReference
Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.
Краткая информация
| Значение по умолчанию | normal |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Синтаксис ?
font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed |
normal | semi-expanded | expanded | extra-expanded | ultra-expandedОбозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Влияние разных значений font-stretch на вид букв в тексте показано на рис. 1.
Рис. 1. Вид букв при разных значениях font-stretch
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
Пример
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font-stretch</title> <style> p { font-size: 5em; font-family: 'Myriad Pro'; } </style> </head> <body> <p> <span>Б</span> <span>Б</span> <span>Б</span> <span>Б</span> <span>Б</span> <span>Б</span> <span>Б</span> <span>Б</span> <span>Б</span> </p> </body> </html>
Объектная модель
Объект.style.fontStretch
Примечание
Браузеры применяют свойство font-stretch не ко всем шрифтам, поэтому уплотнение или расширение текста может не работать с некоторыми популярными и распространёнными гарнитурами шрифтов. Также некоторые значения могут не давать видимого результата.
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.08.2017
Редакторы: Влад Мержевич
webref.ru
CSS свойство font-stretch | назначение, допустимые значения, примеры
Последнее обновление: 05.01.2011
Свойство font-stretch выбирает нормальную, уплотненную или расширенную ширину символов в шрифте.
Допустимые значения
- normal — обычная ширина символов в шрифте
- semi-condensed — узковатая ширина символов в шрифте
- condensed — узкая ширина символов в шрифте
- extra-condensed — очень узкая ширина символов в шрифте
- ultra-condensed — самая узкая ширина символов в шрифте
- narrower — ширина символов в шрифте уже, чем у родительского элемента
- semi-expanded — широковатая ширина символов в шрифте
- expanded — широкая ширина символов в шрифте
- extra-expanded — очень широкая ширина символов в шрифте
- ultra-expanded — самая широкая ширина символов в шрифте
- wider — ширина символов в шрифте шире, чем у родительского элемента
- inherit — ширина символов в шрифте такая же как у родительского элемента
Абсолютные значения, перечисленные от самого узкого до самого широкого: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded.
Относительное значение wider расширяет ширину буквы на один пункт из вышеперечисленного списка, т.е. если у родителя font-stretch имеет абсолютное значение semi-expanded, а у дочернего элемента задано относительное значение wider, то абсолютным значением font-stretch у дочернего элемента будет expanded.
Аналогично, относительное значение narrower сужает ширину буквы на один пункт.
| Значение по умолчанию | normal |
|---|---|
| Применимо | ко всем элементам |
| Наследование | да |
| Версия CSS | CSS 3 |
| Поддерживается браузерами |
Пример
p {
font-stretch:wider;
}
Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— p{ font:italic bold 16px Arial, sans-serif; } .exr{ font-stretch:ultra-expanded; } .cond{ font-stretch:ultra-condensed; } —> </style> </head> <body> <p>Это текст с обычной толщиной букв</p> <p>Это текст с самой широкой толщиной букв</p> <p>Это текст с самой узкой толщиной букв</p> </body> </html>Сделай код и жми тут
Результат:
большой полигонЗаметки
Это свойство относится к модулю CSS Fonts Module Level 3 находящемся в разработке W3C, поэтому в нем возможны изменения.
На момент написания статьи это свойство не поддерживается ни одним из распространенных браузеров.
По теме
html-css-php-js.ru
Размер | CSS | WebReference
Для задания размеров различных элементов в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.
Относительные единицы
Относительные единицы обычно используют для работы с текстом. В табл. 1 перечислены основные относительные единицы.
| Единица | Описание |
|---|---|
| em | Размер шрифта текущего элемента |
| ex | Высота символа x |
| ch | Ширина символа 0 текущего элемента |
| rem | Размер шрифта корневого элемента |
Единица em это изменяемое значение, которое зависит от размера шрифта текущего элемента (размер устанавливается через стилевое свойство font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию или размеру шрифта родительского элемента. Процентная запись идентична em, в том смысле, что значения 1em и 100% равны.
Единица ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.
Единица ch равна ширине символа «0» для текущего элемента и подобно em зависит от размера шрифта.
Разница между em и rem следующая. em зависит от размера шрифта родителя элемента и меняется вместе с ним, а rem привязан к корневому элементу, т. е. размеру шрифта заданного для элемента html.
Также есть группа относительных единиц привязанных к размеру области просмотра браузера. В табл. 2 показан их список с описанием.
| Единица | Описание |
|---|---|
| vw | 1% от ширины области просмотра |
| vh | 1% от высоты области просмотра |
| vmin | 1% от меньшего значения из ширины и высоты области просмотра |
| vmax | Определяется, что больше, значение ширины или высоты области просмотра и от него вычисляется 1% |
Абсолютные единицы
Абсолютные единицы представляют собой физические размеры — дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. В табл. 3 перечислены основные абсолютные единицы.
| Единица | Описание |
|---|---|
| px | Пиксель |
| in | Дюйм (1 дюйм равен 2,54 см) |
| cm | Сантиметр |
| mm | Миллиметр |
| pt | Пункт (1 пункт равен 1/72 дюйма) |
| pc | Пика (1 пика равна 12 пунктам) |
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Относительные единицы</title>
<style>
h2 { font-size: 30px; }
p { font-size: 1.5em; }
</style>
</head>
<body>
<h2>Заголовок размером 30 пикселей</h2>
<p>Размер текста 1.5 em</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Абсолютные единицы</title>
<style>
h2 { font-size: 24pt; }
p { margin-left: 30mm; }
</style>
</head>
<body>
<h2>Заголовок размером 24 пункта</h2>
<p>Сдвиг текста вправо на 30 миллиметров</p>
</body>
</html>Примечание
При установке размеров обязательно указывайте единицы измерения, например width: 30px. В противном случае браузер не сможет показать желаемый результат, поскольку не понимает, какой размер вам требуется. Единицы не добавляются только при нулевом значении (margin: 0).
Internet Explorer поддерживает единицу vm вместо vmin.
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры ?
| px, in, cm, mm, pt, pc, em, ex | 3 | 12 | 1 | 3.5 | 1 | 1 |
| ch | 9 | 12 | 27 | 20 | 7 | 1 |
| rem | 9 | 12 | 4 | 11.6 | 4.1 | 3.6 |
| vw, vh | 9 | 12 | 20 | 20 | 6 | 19 |
| vmax | 16 | 26 | 15 | 6.1 | 19 | |
| vmin | 9 | 12 | 20 | 15 | 6 | 19 |
| px, in, cm, mm, pt, pc, em, ex | ||||
| ch | 4.4 | 2 | 37 | 7.1.1 |
| rem | 2.1 | 2 | 12 | 4 |
| vw, vh | 2.1 | 19 | 37 | 6 |
| vmax | 4.4 | 19 | 37 | 6.1 |
| vmin | 2.1 | 19 | 37 | 6 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 12.09.2018
Редакторы: Влад Мержевич
webref.ru
CSS свойство font-stretch | назначение, допустимые значения, примеры
Свойство font-stretch выбирает нормальную, уплотненную или расширенную ширину символов в шрифте.
Допустимые значения
- normal — обычная ширина символов в шрифте
- semi-condensed — узковатая ширина символов в шрифте
- condensed — узкая ширина символов в шрифте
- extra-condensed — очень узкая ширина символов в шрифте
- ultra-condensed — самая узкая ширина символов в шрифте
- narrower — ширина символов в шрифте уже, чем у родительского элемента
- semi-expanded — широковатая ширина символов в шрифте
- expanded — широкая ширина символов в шрифте
- extra-expanded — очень широкая ширина символов в шрифте
- ultra-expanded — самая широкая ширина символов в шрифте
- wider — ширина символов в шрифте шире, чем у родительского элемента
- inherit — ширина символов в шрифте такая же как у родительского элемента
Абсолютные значения, перечисленные от самого узкого до самого широкого: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded.
Относительное значение wider расширяет ширину буквы на один пункт из вышеперечисленного списка, т.е. если у родителя font-stretch имеет абсолютное значение semi-expanded, а у дочернего элемента задано относительное значение wider, то абсолютным значением font-stretch у дочернего элемента будет expanded.
Аналогично, относительное значение narrower сужает ширину буквы на один пункт.
| Значение по умолчанию | normal |
|---|---|
| Применимо | ко всем элементам |
| Наследование | да |
| Версия CSS | CSS 3 |
| Поддерживается браузерами |
Пример
p {
font-stretch:wider;
}
Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— p{ font:italic bold 16px Arial, sans-serif; } .exr{ font-stretch:ultra-expanded; } .cond{ font-stretch:ultra-condensed; } —> </style> </head> <body> <p>Это текст с обычной толщиной букв</p> <p>Это текст с самой широкой толщиной букв</p> <p>Это текст с самой узкой толщиной букв</p> </body> </html>Сделай код и жми тутРезультат:
большой полигонЗаметки
Это свойство относится к модулю CSS Fonts Module Level 3 находящемся в разработке W3C, поэтому в нем возможны изменения.
На момент написания статьи это свойство не поддерживается ни одним из распространенных браузеров.
Свойство font-style Свойство font-size-adjustmpbox.ru