Толщина текста css: font-weight | CSS | WebReference

Толщина шрифта CSS: свойство font-weight

На этой странице

Свойство font-weight определяет вес глифов в шрифте, их степень черноты или толщину штриха.

Ценности имеют следующие значения:

От 100 до 900

Эти значения образуют упорядоченную последовательность, где каждое число указывает на вес, который как минимум такой же темный, как и его предшественник. Они примерно соответствуют обычно используемым названиям веса ниже:

normal

То же, что и 400.

bold

То же, что и 700.

bolder

Задает более жирный вес, чем унаследованное значение.

lighter

Задает меньший вес, чем унаследованное значение.

p { font-family: "Arial"; font-style: italic; font-weight: 700 }
p { font-family: "Arial"; font-weight: normal }
p { font-family: "Arial"; font-weight: bold }
p { font-family: "Arial"; font-weight: lighter }
p { font-family: "Arial"; font-weight: bolder }

Форматы шрифтов, которые используют шкалу, отличную от шкалы с девятью шагами, должны отображать свой масштаб на шкале CSS так, чтобы 400 примерно соответствовало начертанию, которое было бы помечено как Regular, Book, Roman, а 700 примерно соответствовало начертанию, которое было бы помечено как Bold.

Указанные значения bolder и lighter указывают веса относительно веса родительского элемента. Расчетный вес рассчитывается на основе унаследованного font-weight значения с использованием приведенной ниже таблицы.

Приведенная выше таблица эквивалентна выбору следующего относительного более жирного или более светлого начертания, учитывая семейство шрифтов, содержащее нормальные и полужирные грани, а также тонкую и жирную грань.

Рекомендуемые материалы

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

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;
}

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

text-decoration-thickness — CSS: Каскадные таблицы стилей

Свойство CSS text-decoration-thickness задает толщину обводки декоративной линии, которая используется в тексте в элементе, таком как сквозная линия, подчеркивать или зачеркивать.

 /* Одно ключевое слово */
толщина оформления текста: авто;
толщина оформления текста: от шрифта;
/* длина */
толщина оформления текста: 0,1 em;
толщина оформления текста: 3px;
/* процент */
толщина оформления текста: 10%;
/* Глобальные значения */
толщина оформления текста: наследовать;
толщина оформления текста: начальная;
толщина оформления текста: вернуться;
толщина оформления текста: слой возврата;
толщина оформления текста: не установлено;
 

Значения

авто

Браузер выбирает подходящую ширину строки оформления текста.

от шрифта

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

auto , а браузер выбрал соответствующую толщину.

<длина>

Указывает толщину линии оформления текста как , отменяя предложение файла шрифта или значение по умолчанию браузера.

<процент>

Определяет толщину линии оформления текста как <процент> из 1em в текущем шрифте. Процент наследуется как относительное значение и, следовательно, масштабируется при изменении шрифта. Браузер должен использовать как минимум 1 пиксель устройства. Для данного применения этого свойства толщина постоянна для всего поля, к которому оно применяется, даже если есть дочерние элементы с другим размером шрифта.

 text-decoration-thickness = 
 auto | 
 из шрифта | 
 <длина> | 
  

Различная толщина

HTML

 
Вот текст с красным подчеркиванием толщиной 1 пиксель.
У этого есть красная линия подчеркивания шириной 5 пикселей.
Здесь используется эквивалентное сокращение.
 

CSS

 .тонкий {
  строка оформления текста: подчеркивание;
  стиль оформления текста: сплошной;
  цвет оформления текста: красный;
  толщина оформления текста: 1px;
}
. толстый {
  строка оформления текста: подчеркивание;
  стиль оформления текста: сплошной;
  цвет оформления текста: красный;
  толщина оформления текста: 5px;
}
.сокращенно {
  оформление текста: подчеркивание сплошным красным 5px;
}
 

Результаты

 color:#888888;
тень текста: 2px 0 #888888;
интервал между буквами: 2px;
вес шрифта: полужирный;
 

 цвет:#888888;
тень текста: 1px 0 #888888;
интервал между буквами: 1px;
вес шрифта: полужирный;
 

 .extra-bold {
  тень текста: 0px 1px, 1px 0px, 1px 1px;
}
 

 тень текста: 0px 1px, 1px 0px, 1px 0px;
 

 text-shadow: 0.5px 0 currentColor;
межбуквенный интервал: 0,5 пикселей;