Css толщина шрифта: font-weight | WebReference — Вебджем.рф | Создание и продвижение сайтов

bolder» для шрифтов со множеством начертаний / Хабр

Если вы используете шрифт со множеством начертаний, то вам, вероятно, захочется, чтобы теги strong и b не увеличивали жирность шрифта до фиксированного значения font-weight:700, как это происходит по-умолчанию, а использовали промежуточные значения, рассчитанные исходя из жирности шрифта родительского элемента.
Ведь не очень красиво, когда в ультратонком шрифте появляются жирные кляксы тегов strong.

Возьмём для примера Open Sans.

Open Sans имеет пять начертаний: Light 300, Normal 400, Semi-Bold 600, Bold 700 и Extra-Bold 800.
Цифры соответствуют значению font-weight.

Пусть основной текст имеет начертание Light 300, заголовки и цитаты — Normal 400, а промо-блок — Semi-Bold 600:

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
h2, h3, h4, h5, h5, h6,
blockquote {
  font-weight: 400;
}
.  promo {
  font-weight: 600;
}

Тег strong может встечаться и в основном тексте, и в цитатах, и промо-блоке. Надо это учесть.

По-умолчанию:

strong, b {
	font-weight: bold; /* bold = 700 */
}

А нам хочется, чтобы у strong и b для основного текста было Normal 400, для цитат и заголовков — Bold 700, а для промо блока — Extra-Bold 800. Это сохранит контраст между жирным и нежирным текстом примерно равным во всех случаях.

Уверен, многие пробовали использовать strong {font-weight: bolder;}, но это не принесло ожидаемого результата — текст стал ещё жирнее, чем ожидалось.

А всё потому, что согласно спецификации, значение bolder (lighter) увеличивает (уменьшает) унаследованное значение font-weight до следующего возможного для данного шрифта значения, согласно следующей таблице.

наследуемое значение	bolder	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Но в браузерной CSS прописано strong, b {font-weight: bold;}, т. е. унаследуется значение «700», а потом оно ещё и увеличивается до «900». Поэтому кажется, что bolder работает неправильно.

Исправить это можно так:

 /* сбрасываем стандартное «bold», 
шрифт становится таким же как его родительский элемент */
strong, b {
  font-weight: inherit; 
}
/* теперь bolder будет вычисляться исходя из веса шрифта родительского элемента */
strong, b {
  font-weight: bolder;
}

Именно так, как два отдельных правила. Первое обнуляет значение font-weight из браузерной таблицы стилей, второе задаёт жирность уже в относительных, а не абсолютных единицах.

Теперь нам не придётся заботиться о вложенности элементов — каскад всё сделает автоматически. Мы можем вкладывать теги strong друг в друга.

Вложенные теги «strong». Толщина шрифта определяется исходя из значения родительского элемента.
Демка

Ограничения

Используя относительные значения font-weight мы получаем только по три градации жирности шрифта для bolder и lighter соответственно.

Спецификация не гарантирует, что браузеры правильно сопоставят названия начертаний и числовые значения. Не гарантирует, что для шрифта найдётся более жирное или более тонкое начертание. У некоторых шрифтов всего два начертания, у некоторых может быть восемь.

Единственной гарантией при использовании bolder / lighter является то, что шрифт при значении «bolder» не будет тоньше, чем более легкие начертания этого шрифта, а при значении «lighter» будет не толще, чем более жирные начертания этого шрифта.

Чтобы более тонко настроить вес шрифта, надо использовать абсолютные значения.

Баги

Если у вас шрифт установлен в системе, но не подключен через @font-face, то Google Chrome определяет только Normal и Bold начертания шрифта. Чтобы локальный шрифт заработал, нужно дополнительно указать его

font-family.

.fw300 {
  font-family: "Open Sans Light", "Open Sans";
  font-weight: 300;
}
. fw600 {
  font-family: "Open Sans SemiBold", "Open Sans";
  font-weight: 600;
}

CSS3 | Стилизация шрифтов

Последнее обновление: 21.04.2016

Семейство шрифтов

Свойство font-family устанавливает семейство шрифтов, которое будет использоваться. Например:


body{
	font-family: Arial;
}

В данном случае устанавливается шрифт Arial.

Шрифт свойства font-family будет работать, только если у пользователя на локальном компьютере имеется такой же шрифт. По этой причине нередко выбираются стандартные шрифты, которые широко распространены, как Arial, Verdana и т.д.

Также нередко применяется практика нескольких шрифтов:


body{
	font-family: Arial, Verdana, Helvetica;
}

В данном случае основным шрифтом является первый — Arial. Если он на компьютере пользователя не поддерживается, то выбирается второй и т.д.

Если название шрифта состоит из нескольких слов, например, Times New Roman, то все название заключается в кавычки:


body{
	font-family: "Times New Roman";
}

Кроме конкретных стилей также могут использоваться общие универсальные шрифты, задаваемые с помощью значений sans-serif и serif:


body{
	font-family: Arial, Verdana, sans-serif;
}

Так, если ни Arial, ни Verdana не поддерживаются на компьютере пользователя, то используется sans-serif — универсальный шрифт без засечек.

Типы шрифтов

Шрифты с засечками

Шрифты с засечками названы так, потому что на на концах основных штрихов имеют небольшие засечки. Считается, что они подходят для больших кусков текста, так как визуально связывают одну букву с другой, делая текст более читабельным.

Распространенные шрифты с засечками: Times, Times New Roman, Georgia, Garamond. Универсальный обобщенный шрифт с засечками представляет значение serif.

Шрифты без засечек

В отличие от шрифтов с засечками шрифты из этой группы не имеют засечек. Наиболее распространенные шрифты этой группы: Arial, Helvetica, Verdana.

Моноширинные шрифты

Моноширинный шрифт преимущественно применяется для отображения программного кода и не предназначен для вывода стандартного текста статей. Свое название эти шрифты получили от того, что каждая буква в таком шрифте имеет одинаковую ширину. Примеры подобных шрифтов: Courier, Courier New, Consolas, Lucida Console.

Примеры шрифтов:

Толщина шрифта

Свойство font-weight задает толщину шрифта. Оно может принимать 9 числовых значений: 100, 200, 300, 400,…900. 100 — очень тонкий шрифт, 900 — очень плотный шрифт.

В реальности чаще для этого свойства используют два значения: normal (нежирный обычный текст) и bold (полужирный шрифт):


font-weight: normal;
font-weight: bold;

Курсив

Свойство font-style позволяет выделить текст курсивом. Для этого используется значение italic:


p {font-style: italic;}

Если надо отменить курсив, то применяется значение normal:


p {font-style: normal;}

Цвет шрифта

Свойство color устанавливает цвет шрифта:


p {
	color: red;
}

НазадСодержаниеВперед

Толщина шрифта / Типография / Документы / TACHYONS

Масштаб шрифта Мера Высота строки / Интерлиньяж Отслеживание Вес шрифта Стиль шрифта Вертикальное выравнивание Выравнивание текста Преобразование текста Оформление текста Белое пространство Семейства шрифтов

Толщина шрифта

Одноцелевые классы для установки веса шрифта любого элемента в любой точке останова.

Изменение толщины шрифта разных фрагментов текста может помочь создать контраст между порциями информации. Это может помочь привлечь внимание к произведению содержимого или помочь сделать меньший размер шрифта более читабельным. В «Элементы типографского стиля», Роберт Брингхерст предлагает сохранить две вещи. помните, когда играете с весом шрифта. Используйте смелые веса экономно. Вес шрифта должен уменьшаться по мере увеличения размера шрифта.

Примеры

Строковые значения

Толщина шрифта: нормальная

Начертание: нормальное

Шрифт: полужирный

Начертание шрифта: полужирный

Числовые значения

Шрифт: 100

Вес шрифта: 100

Шрифт: 200

Вес шрифта: 200

Шрифт: 300

Вес шрифта: 300

Шрифт: 400

Вес шрифта: 400

Шрифт: 500

Вес шрифта: 500

Шрифт: 600

Вес шрифта: 600

Шрифт: 700

Вес шрифта: 700

Шрифт: 800

Вес шрифта: 800

Шрифт: 900

Начертание: 900

Отслеживание

Семейство шрифтов

Артикул

MDN — вес шрифта

тахион-шрифт-вес

v5.

0.5 244 Б

Декларации: 44

Селекторы: 44

Макс. Оценка специфичности: 10

Размер среднего размера Правило: 1

src/_font-weights.css

/*
   НАСТРОЙКА ШРИФТА
   Документы: http://tachyons.io/docs/typography/font-weight/
   База
     fw = вес шрифта
   Модификаторы:
     1 = буквальное значение 100
     2 = буквальное значение 200
     3 = буквальное значение 300
     4 = буквальное значение 400
     5 = буквальное значение 500
     6 = буквальное значение 600
     7 = буквальное значение 700
     8 = буквальное значение 800
     9= буквальное значение 900
   Расширения медиазапроса:
     -ns = не маленький
     -м = средний
     -л = большой
*/
.normal { вес шрифта: нормальный; }
.b {начертание шрифта: полужирный; }
.fw1 { вес шрифта: 100; }
. fw2 { вес шрифта: 200; }
.fw3 { вес шрифта: 300; }
.fw4 { вес шрифта: 400; }
.fw5 { вес шрифта: 500; }
.fw6 { вес шрифта: 600; }
.fw7 { вес шрифта: 700; }
.fw8 { вес шрифта: 800; }
.fw9 { вес шрифта: 900; }
@media (--точка останова-не-маленький) {
  .normal-ns { вес шрифта: нормальный; }
  .b-ns { вес шрифта: полужирный; }
  .fw1-ns { вес шрифта: 100; }
  .fw2-ns { вес шрифта: 200; }
  .fw3-ns { вес шрифта: 300; }
  .fw4-ns { вес шрифта: 400; }
  .fw5-ns { вес шрифта: 500; }
  .fw6-ns { вес шрифта: 600; }
  .fw7-ns { вес шрифта: 700; }
  .fw8-ns { вес шрифта: 800; }
  .fw9-ns { вес шрифта: 900; }
}
@media (--точка останова-среда) {
  .normal-m { вес шрифта: нормальный; }
  .bm {начертание шрифта: полужирный; }
  .fw1-m { вес шрифта: 100; }
  .fw2-m { вес шрифта: 200; }
  .fw3-m { вес шрифта: 300; }
  .fw4-m { вес шрифта: 400; }
  .fw5-m { вес шрифта: 500; }
  .fw6-m { вес шрифта: 600; }
  .fw7-m { вес шрифта: 700; }
  .fw8-m { вес шрифта: 800; }
  .fw9-m { вес шрифта: 900; }
}
@media (--breakpoint-large) {
  . normal-l { вес шрифта: нормальный; }
  .b-l {начертание шрифта: полужирный; }
  .fw1-l { вес шрифта: 100; }
  .fw2-l { вес шрифта: 200; }
  .fw3-l { вес шрифта: 300; }
  .fw4-l { вес шрифта: 400; }
  .fw5-l { вес шрифта: 500; }
  .fw6-l { вес шрифта: 600; }
  .fw7-l { вес шрифта: 700; }
  .fw8-l { вес шрифта: 800; }
  .fw9-l { вес шрифта: 900; }
}

Обзор тахионов

Таблица стилей Таблица свойств

Типография

Тип Масштаб Мера Высота строки / Интерлиньяж Отслеживание Вес шрифта Стиль шрифта Вертикальное выравнивание Выравнивание текста Преобразование текста Оформление текста Белое пространство Семейства шрифтов Авенир Далее Гельветика Робото Сан-Франциско Система без засечек Ателас Баскервиль Гарамонд Грузия Системная засечка

Макет

Отладка Отладка с сеткой Базовая сетка Флексбокс Размер коробки Расстояние Поплавки Клирфикс Отображать Ширина Максимальная ширина Высоты Позиция

Тематика

Скины Скины анимации Парит Размер фона Границы Радиус границы Коробчатая тень Непрозрачность

Элементы

Картинки Ссылки Списки Формы Столы

Вес шрифта CSS — javatpoint

следующий → ← предыдущая

Это свойство используется для установки толщины и жирности шрифта. Он используется для определения веса текста. Доступный вес зависит от семейства шрифтов, которое используется браузером.

Синтаксис

Значения свойств

нормальный: Это вес шрифта по умолчанию, числовое значение которого равно 400.

легче: Он учитывает существующую толщину шрифта семейства шрифтов и делает ее легче по сравнению с родительским элементом.

жирнее: Он учитывает существующую толщину шрифта семейства шрифтов и делает ее толще по сравнению с родительским элементом.

полужирный: Как следует из названия, он используется для определения веса полужирного шрифта, а его числовое значение равно 700.

номер: Используется для установки веса шрифта на основе указанного числа. Его диапазон может быть от 1 до 1000.

Css толщина шрифта: font-weight | WebReference

bolder» для шрифтов со множеством начертаний / Хабр

Ограничения

Баги

CSS3 | Стилизация шрифтов

Семейство шрифтов

Типы шрифтов

Шрифты с засечками

Шрифты без засечек

Моноширинные шрифты

Толщина шрифта

Курсив

Цвет шрифта

Толщина шрифта / Типография / Документы / TACHYONS

Толщина шрифта

Примеры

Строковые значения

Числовые значения

Предыдущий

Далее

Артикул

тахион-шрифт-вес

Обзор тахионов

Типография

Макет

Тематика

Элементы

Вес шрифта CSS — javatpoint

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

Рубрики

наследуемое значение	bolder	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

наследуемое значение	bolder	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

наследуемое значение	bolder	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700