Ширина букв css – font-stretch | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

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 на вид букв в тексте показано на рис. 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; }

Твой код:

Результат:

большой полигон

Заметки

Это свойство относится к модулю CSS Fonts Module Level 3 находящемся в разработке W3C, поэтому в нем возможны изменения.

На момент написания статьи это свойство не поддерживается ни одним из распространенных браузеров.

Свойство font-style Свойство font-size-adjust

html-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

Примечание

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

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 — ширина символов в шрифте такая же как у родительского элемента

Аналогично, относительное значение 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 перечислены основные относительные единицы.
Табл. 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 показан их список с описанием.
Табл. 2. Относительные единицы измерения
Единица Описание
vw 1% от ширины области просмотра
vh 1% от высоты области просмотра
vmin 1% от меньшего значения из ширины и высоты области просмотра
vmax Определяется, что больше, значение ширины или высоты области просмотра и от него вычисляется 1%
Абсолютные единицы
Абсолютные единицы представляют собой физические размеры — дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. В табл. 3 перечислены основные абсолютные единицы.
Табл. 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-adjust
mpbox.ru
No related posts.

Единица	Описание
em	Размер шрифта текущего элемента
ex	Высота символа x
ch	Ширина символа 0 текущего элемента
rem	Размер шрифта корневого элемента

Единица	Описание
vw	1% от ширины области просмотра
vh	1% от высоты области просмотра
vmin	1% от меньшего значения из ширины и высоты области просмотра
vmax	Определяется, что больше, значение ширины или высоты области просмотра и от него вычисляется 1%

Единица	Описание
px	Пиксель
in	Дюйм (1 дюйм равен 2,54 см)
cm	Сантиметр
mm	Миллиметр
pt	Пункт (1 пункт равен 1/72 дюйма)
pc	Пика (1 пика равна 12 пунктам)


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

Ширина букв css – font-stretch | htmlbook.ru

font-stretch | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Браузеры

CSS свойство font-stretch | назначение, допустимые значения, примеры

Допустимые значения

Пример

Твой код:

Результат:

Заметки

letter-spacing | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

font-stretch | CSS | WebReference

Краткая информация

Синтаксис ?

Обозначения

Значения

Песочница

Пример

Объектная модель

Примечание

Спецификация ?

Спецификация

Браузеры

Автор и редакторы

CSS свойство font-stretch | назначение, допустимые значения, примеры

Допустимые значения

Пример

Твой код:

Результат:

Заметки

По теме

Размер | CSS | WebReference

Относительные единицы

Абсолютные единицы

Пример

Примечание

Спецификация ?

Спецификация

Браузеры ?

Браузеры

Автор и редакторы

CSS свойство font-stretch | назначение, допустимые значения, примеры

Допустимые значения

Пример

Твой код:

Результат:

Заметки

Добавить комментарий Отменить ответ

Рубрики

Рубрики