Содержание

font-weight — Веб-технологии для разработчиков

CSS свойство font-weight устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Синтаксис

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

/* Relative to the parent */
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

Значения

normal
Нормальное начертание. То же, что и 400.
bold
Полужирное начертание. То же, что и 700.
lighter
Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).
bolder
Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).
100, 200, 300, 400, 500, 600, 700, 800, 900
Цифровые значения насыщенности шрифтов, которые позволяют задавать больше, чем нормальное и полужирное начертание.

Недоступность заданного значения

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

  • Если задано значение выше 
    500    , будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
  • Если задано значение менее 400, будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
  • Если задано значение 400, будет применено 500. Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400.
  • Если задано значение 500, будет применено 400. Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400
    .

Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.

Значение относительных весов

Когда используется жирнее или светлее, следующая таблица используется для вычисления абсолютного веса элемента:

наследуемое значениежирнеесветлее
100400100
200400100
300400100
400700
100
500700100
600900400
700900400
800900700
900900700

Определение веса имени

Значения от 100 до 900, примерно, соответствуют следующим распространенным именам насыщенности:

ЗначениеОбщее название
100Тонкий (Волосяной) Thin (Hairline)
200		Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light)
300Светлый Light
400Нормальный Normal
500Средний Medium
600Полужирный Semi Bold (Demi Bold)
700Жирный Bold
800Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold)
900Черный (Густой) Black (Heavy)

Интерполяция

Значения font-weight

интерполируются  с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путем округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округленными в сторону положительной бесконечности.

Формальный синтаксис

<font-weight-absolute> | bolder | lighter
где 
<font-weight-absolute> = normal | bold | <number>

Примеры

HTML

<p>
  Alice was beginning to get very tired of sitting by her sister on the
  bank, and of having nothing to do: once or twice she had peeped into the
  book her sister was reading, but it had no pictures or conversations in
  it, 'and what is the use of a book,' thought Alice 'without pictures or
  conversations?'
</p>

<div>I'm heavy<br/>
  <span>I'm lighter</span>
</div>

CSS

/* Назначение тексту элемента <p> жирного начертания. */
p {
  font-weight: bold;
}

/* Назначение тексту элемента <div> жирности, которая больше на два уровня,
чем normal, но все еще меньше, чем стандартный bold. */
div {
 font-weight: 600;
}

/* Назначение тексту элемента <span> жирности,
которая на один уровень меньше, чем у его родителя. */
span {
  font-weight: lighter;
}

Result

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

Совместимость браузеров

Feature
Chrome		Firefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка2.01.0 (1.7 или ранее)3.03.51.3
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базовая поддержка1.01.0 (1.0)6.06.03.1

Свойство font-weight | CSS справочник

CSS свойства

Определение и применение

CSS свойство font-weight устанавливает насколько жирным будет выглядеть текст в элементе.

Поддержка браузерами

CSS синтаксис:

font-weight:"normal | bold | bolder | lighter | number | initial | inherit";

JavaScript синтаксис:

object.style.fontWeight = "normal"

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

ЗначениеОписание
normalОпределяет нормальное начертание символов. Это значение по умолчанию.
boldОпределяет жирное начертание символов.
bolderУвеличивает унаследованное значение font-weight до следующего возможного для данного шрифта значения.
lighterУменьшает унаследованное значение font-weight до следующего возможного для данного шрифта значения.
100
200
300
400
500
600
700
800
900		Определяет толщину шрифта в тексте исходя из указанного значения.
400 — соответствует значению normal.
700 — соответствует значению bold.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства font-weight.</title>
<style> 
.test
 
 {
font-weight : 100;
}
.test2 {
font-weight : bold;
}
.test3 {
font-weight : 900;
}
</style>
</head>
	<body>
		<p class = "test">font-weight: 100;</p>
		<p>font-weight: normal;</p>
		<p class = "test2">font-weight: bold;</p>
		<p class = "test3">font-weight: 900;</p>
	</body>
</html>
Пример использования свойства CSS font-weight («жирность» шрифта). CSS свойства

Свойство font-weight | CSS

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

span {
    font-weight: bold;
}

В качестве значения свойство font-weight принимает ключевое слово или числовое значение. Доступные ключевые слова:

  • normal;
  • bold;
  • bolder;
  • lighter.

Доступные числовые значения:

  • 100;
  • 200;
  • 300;
  • 400;
  • 500;
  • 600;
  • 700;
  • 800;
  • 900.

Значение ключевого слова normal соответствует числовому значению 400, а значение CSS font weight bold — числовому значению 700.

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

Если шрифт имеет жирную («700«) или обычную («400«) версию, то браузер будет использовать их. Если они не доступны, браузер будет имитировать собственную жирную или нормальную версию. Для шрифтов часто используют такие названия, как «Regular» и «Light«, чтобы определить альтернативные значения толщины шрифта.

Следующая демо-версия иллюстрирует использование альтернативных значений толщины:

Посмотреть демо — версию

В приведенной выше демо-версии используется бесплатный шрифт Open Sans, реализуемый с помощью API Google Web Fonts. Шрифт загружается со всеми доступными значениями толщины. С помощью свойства CSS font-weight в тексте каждого абзаца отображаются различные доступные версии. Недоступная версия выводится как логически ближайшая толщина.

Обычные шрифты, такие как Arial, Helvetica, Georgia и т.д. не имеют другой толщины, кроме 400 и 700. Если бы в демо-версии использовался один из этих шрифтов, то во всех абзацах мы увидели бы только две его версии.

Значения ключевых слов «bolder» и «lighter» зависят от вычисляемой толщины шрифта родительского элемента. Браузер будет искать ближайшую к «bolder» или «lighter» толщину в семействе шрифта. Иначе браузер просто установит «400» или «700«.

Дочерние элементы не наследуют значения ключевых слов «bolder» и «lighter«, но вместо этого наследуют вычисленную толщину.

ChromeSafariFirefoxOperaIEAndroidiOS
РаботаетРаботаетРаботаетРаботаетРаботаетРаботаетРаботает

 

Данная публикация представляет собой перевод статьи «font-weight» , подготовленной дружной командой проекта Интернет-технологии.ру

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

Свойства шрифта в CSS | Учебные курсы

font-size

Мы уже рассмотрели единицы размера в CSS, которые применяются для задания размера шрифта, среди прочего.

p { font-size: 16px; }

Имейте в виду, что установка размера шрифта 16px не делает каждую букву высотой 16px. Фактический размер каждой буквы зависит от используемого font-family.

font-style

Это свойство может сделать ваш текст курсивным:

h3 { font-style: italic; }

Значение по умолчанию — font-style: normal.

Другое возможное значение oblique никогда не используется.

font-weight

Это свойство может сделать ваш текст жирным:

h3 { font-weight: bold; }

Значение по умолчанию — font-weight: normal.

В зависимости от используемого font-family, существует целый ряд насыщенности шрифта, доступных от 100 до 900:

font-weight: 100; /* Тонкий */
font-weight: 200; /* Сверхлёгкий */
font-weight: 300; /* Лёгкий */
font-weight: 400; /* Такой же, как font-weight: normal; */
font-weight: 500; /* Средний */
font-weight: 600; /* Полужирный */
font-weight: 700; /* Такой же, как font-weight: bold; */
font-weight: 800; /* Сверхжирный */
font-weight: 900; /* Ультражирный */

Очень немногие шрифты предлагают все девять насыщенностей. Шрифт Exo является одним из них. Вы найдёте в основном 400 (нормальный) и 700 (жирный), а иногда 300 (лёгкий) и 500 (средний).

font-variant

Это свойство превратит ваш текст в капитель:

h3 { font-variant: small-caps; }

Значение по умолчанию — font-variant: normal.

Это не широко используемое свойство.

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

Автор: Джереми Томас

Последнее изменение: 13.08.2017

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты

Учебник CSS для начинающих. Свойства шрифта.

Глава 3

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

Свойство font-style, в зависимости от выбранного значения, определяет стиль шрифта.

Шрифт может иметь следующие стили:

  • normal — обычный (по умолчанию)
  • italic — курсив
  • oblique — наклонный

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Стиль шрифта</title>
</head>
<body>
<p>это курсив</p>
<p>а это наклонный текст</p>
<p>И чем спрашивается, они отличаются?</p>
</body>
</html>

Чем отличается курсив от наклонного текста? Курсив — это своего рода шрифт взятый из библиотеки шрифтов, а наклонный текст — это результат работы алгоритма, где каждый символ слегка наклоняется в правую сторону.

Весьма интересное свойство шрифта font-variant позволяет делать строчные буквы заглавными и уменьшенными.

Значения:

  • normal — нормальный (по умолчанию)
  • small-caps — все буквы заглавные и уменьшенные

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Все буквы заглавные</title>
</head>
<body>
<p>Купи слона!!</p>
</body>
</html>

Свойство CSS font-size — определяет размер шрифта.

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

значения абсолютного размера шрифта:

  • xx-small — очень очень маленький
  • x-small — очень маленький
  • small — маленький
  • medium — средний
  • large — большой
  • x-large — очень большой
  • xx-large — очень очень большой

значения относительного размера шрифта:

  • larger — больше чем размер шрифта родительского элемента
  • smaller — меньше чем размер шрифта родительского элемента

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Размер шрифта</title>
</head>
<body>
<div>
<p>Размер шрифта родительского элемента (блока DIV) равен 18 пикселям</p>
<p>Этот шрифт будет крупнее относительно элемента родителя</p>
<p>А этот шрифт будет мельче относительно элемента родителя</p>
</div>
<p>В блоке ниже размер штифта элемента родителя огромен (60 пунктов), однако дочерние параграфы расположенные в нём имеют собственное абсолютное значение шрифта и к размеру шрифта элемента родителя никак не привязаны.</p>
<div>
<p>xx-small — очень очень маленький</p>
<p>x-small — очень маленький </p>
<p>small — маленький </p>
<p>medium — средний</p>
<p>large — большой</p>
<p>x-large — очень большой</p>
<p>xx-large — очень очень большой</p>
</div>
</body>
</html>

Свойство font-weight — определяет жирность шрифта. Насыщенность шрифта может быть задана относительно шрифта элемента родителя с помощью следующих значений:

  • normal — обычный шрифт
  • bold — полужирный шрифт
  • bolder — жирный шрифт
  • lighter — тонкий шрифт

А также выражается в условном числовом значении от 100 до 900 с шагом 100 (100, 200, 300… 900) где значение 100 тонкий шрифт, а 900 — сверх жирный.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Жирность шрифта</title>
</head>
<body>
<div>
<p>жирный шрифт</p>
<p>тонкий шрифт</p>
<p>жирность шрифта равна 600</p>
</div>
</body>
</html>

Атрибут CSS font-family — указывает одно, два или три имени шрифта из библиотеки шрифтов.

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

Так например запись в стилевом описании P {font-family: Times New Roman, Arial, Verdana;} — будет указывать браузеру пользователя, что данный параграф следует писать с помощью шрифта Times New Roman, а если его по каким то мифическим причинам не окажется в его библиотеке шрифтов то следует использовать шрифт Arial, и уж если и его нет, тогда писать шрифтом Verdana.

Если же браузер не найдёт в библиотеке шрифтов пользователя ни одного шрифта из указанных то он будет использовать тот шрифт который указан в его настройках «по умолчанию»

Однако также можно указать браузеру не только какой то конкретный шрифт, но и обозначить предпочтительное семейство шрифтов из перечисленных ниже возможных

  • serif — шрифты с засечками
  • sans-serif — рубленые шрифты
  • cursive — курсивные шрифты
  • fantasy — декоративные шрифты
  • monospace — моношириные шрифты

Например, если в файле CSS написать P {font-family: Times New Roman, sans-serif;} то это будет значить что если вдруг не окажится шрифта с именем Times New Roman, то следует использовать любой (или определённый в настройках браузера) доступный шрифт из семейства sans-serif — рубленых шрифтов.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Семейство шрифта</title>
<style type=»text/css»>
h4 {font-family: Times New Roman, Verdana, sans-serif;}
p {font-family: Monotype Corsiva, Verdana;}
span {font-family: Comic Sans MS;}
</style>
</head>
<body>
<h4>Купи слона</h4>
<p>У нас Вы можете по <span>выгодным ценам</span> приобрести лучших слонов!!</p>
</body>
</html>

Вы наверняка обратили внимание на тот факт, что все свойства CSS предназначенные для работы со шрифтом начинаются с английского слова font (собственно шрифт).. font-family, font-size и т.д..

Так вот это неспроста.. дело в том, что все эти свойства являются «дочерними» базового атрибута CSS font в довершении главы о нем собственно и пойдёт речь.

Речь будет недолгой.. )) Итак font — (шрифт), являясь базовым атрибутом, может определять одновременно сразу несколько параметров шрифта принимая те или иные значения от следующих атрибутов:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family

Для более детального ознакомления с возможными параметрами смотрите каждый атрибут отдельно.

Предположим нам необходимо написать стилевое описание шрифта для тега <span> и по нашей задумке шрифт для данного тега должен быть: курсивом, жирным, иметь размер 20 пикселей и использовать шрифт Arial

Все это можно осуществить, написав следующие:

span{
font-style: italic;
font-weight: bolder;
font-size: 20px;
font-family: Arial
}

А можно обойтись всего одной строчкой используя базовый атрибут font.

Вот так:

span{font: italic bold 20px Arial}

Мы просто перечислили нужные нам параметры «марки» font. Согласитесь, по-моему, так писать гораздо проще, к тому же код становится более компактным и лёгким для чтения как браузером, так и человеком.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Параметры шрифта</title>
<style type=»text/css»>
span{font: italic bold 20px Arial}
</style>
</head>
<body>
<span>Этот текст написан курсивом, он жирный, имеет размер 20 пикселей и использует шрифт Arial</span>
</body>
</html>

  • Используйте базовый атрибут font если необходимо применить к шрифту элемента более одного свойства.

  • Помните что текст, прежде всего, должен быть удобным для чтения и только потом красивым и стильным, а по сему советую избегать следующих вещей:

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

  • По мнению психологов, в длинном тексте должно использоваться не менее двух шрифтов, но и не более четырёх.. Причем выделение текста «особым» шрифтом должно иметь систематический характер.. Например все заголовки одним шрифтом, «основной текст» вторым, и «особый текст» третьим.



font | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

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

Значение по умолчаниюЗависит от использования
НаследуетсяДа
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/fonts.html#propdef-font

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

Синтаксис

font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit

Значения

В качестве обязательных значений свойства font указывается размер шрифта и его семейство. Остальные значения являются опциональными и задаются при желании. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно.

inherit
Наследует значение родителя.

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

caption
Шрифт для текста элементов форм вроде кнопок.
icon
Шрифт для текста под иконками.
menu
Шрифт применяемый в меню.
message-box
Шрифт для диалоговых окон.
small-caption
Шрифт для подписей к небольшим элементам управления.
status-bar
Шрифт для строки состояния окон.

Примеры использования

p { font: 12pt/10pt sans-serif; }

Из типографики пошла запись указывать через слэш размер шрифта и межстрочное расстояние (интерлиньяж). Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — интерлиньяж. В качестве семейства указывается рубленый шрифт (sans-serif).

p { font: bold italic 110% serif; }

Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок не важен, поэтому bold и italic можно поменять местами. Размер текста задается в процентах, а в качестве гарнитуры используется шрифт с засечками (serif).

p { font: normal small-caps 12px/14px fantasy; }

Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font-weight.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font</title>
  <style>
   .layer1 {
    font: 12pt sans-serif;  
   } 
   h2 {
    font: 200% serif;
   }
  </style>
 </head>
 <body> 
  <div>
  <h2>Duis te feugifacilisi</h2>
  Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel 
  illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
  dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te 
  feugat nulla facilisi.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font

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

[window.]document.getElementById(«elementID»).style.font

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

font-weight | CSS-уловки

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

  пролет {
    font-weight: жирный;
}

Свойство font-weight принимает либо значение ключевого слова, либо предварительно определенное числовое значение. Доступные ключевые слова:

  • нормальный
  • полужирный
  • полужирный
  • Зажигалка

Доступные числовые значения:

  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Значение ключевого слова normal сопоставляется с числовым значением 400 , а значение bold сопоставляется с 700 .

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

Если шрифт имеет жирную («700») или обычную («400») версию как часть семейства шрифтов, браузер будет использовать это. Если они недоступны, браузер будет имитировать собственную жирную или обычную версию шрифта. Он не будет имитировать другие недоступные веса. Шрифты часто используют такие имена, как «Обычный» и «Легкий» для обозначения любых альтернативных весов шрифта.

Следующая демонстрация демонстрирует использование альтернативных значений веса:

  Оцените эту ручку!

В приведенной выше демонстрации используется бесплатный шрифт Open Sans, встроенный с помощью Google Web Fonts API. В шрифт загружаются все доступные веса шрифта, поэтому с помощью свойства font-weight отображаются различные доступные веса, как описано в тексте каждого абзаца. Недоступные веса просто отображают логически ближайший вес.

Распространенные шрифты, такие как Arial, Helvetica, Georgia и т. Д.не имеют веса, отличного от 400 и 700 . Таким образом, в той же демонстрации, отображаемой с одним из этих шрифтов, будет отображаться только два веса в девяти абзацах.

Использование ключевых слов «жирнее» и «светлее»

Ключевые слова полужирный и светлее относятся к вычисленному весу шрифта родительского элемента. Браузер будет искать ближайший «смелее» или «светлее и

».

font-weight — Ссылка CSS

  • Все объекты
  • Анимации
  • Фоны
  • Коробчатая модель
  • Flexbox
  • Сетка CSS
  • Выбор позиции
  • переходов
  • Типографика
  • align-content
  • align-items
  • align-self
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-time-function
  • animation
  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • background
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border -bottom
  • border-collapse
  • border-color
  • border-left-color
  • border-left-style
  • border-left-width
  • бор der-left
  • border-radius
  • border-right-color
  • border-right-style
  • border-right-width
  • border-right
  • border-style
  • border-top-color
  • border- top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-top
  • border-width
  • border
  • bottom
  • box-shadow
  • размер коробки
  • прозрачный
  • цвет
  • количество столбцов
  • промежуток между столбцами
  • ширина столбца
  • содержимое
  • курсор
  • дисплей
  • гибкое основание
  • гибкое направление
  • гибкое направление потока
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • font-family
  • font-size
  • font-style
  • font-option
  • font-weight
  • font
  • grid-area
    • 901 67 grid-auto-columns
.

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

Попутный ветер CSS Попутный ветер CSS v1.6,0 v0.7.4 GitHub щебет диссонанс v1.6.0 v0.7.4 Документация Составные части Screencasts Блог Ресурсы сообщество
Начало работы
  • Монтаж
.

jonathantneal / css-font-weight-names: объект JSON с именами веса шрифта css, сопоставленным с их числовым значением веса шрифта

перейти к содержанию Зарегистрироваться
  • Почему именно GitHub? Особенности →
    • Обзор кода
    • Управление проектами
    • Интеграции
    • Действия
    • Пакеты
    • Безопасность
    • Управление командой
    • Хостинг
    • мобильный
    • Истории клиентов →
    • Безопасность →
  • команда
  • предприятие
  • Проводить исследования
    • Изучите GitHub →
    Учитесь и вносите свой вклад
    • Темы
    • Коллекции
    • В тренде
    • Учебная лаборатория
    • Руководства с открытым исходным кодом
    Общайтесь с другими
    • События
.

No related posts.