Font weight bold: Свойство font-weight, насыщенность шрифта — Оформление текста — HTML Academy

Мне было интересно, есть ли способ изменить CSS на массу, где font-weight: 800, и заменить его на 700. У меня есть рабочий сайт, на который я захожу, и они изменили весь свой вес шрифта с ‘bold’ до…

Я пытаюсь использовать свойство @font-face CSS для определения моих шрифтов ttf локально следующим образом: open-sans.css @font-face { font-family: ‘Open Sans’; src: url(‘OpenSans-Regular.ttf’)…

font-weight:normal font-weight:bold font-weight:bolder font-weight:lighter font-weight:100 font-weight:200 font-weight:300 font-weight:400 font-weight:500 font-weight:600 font-weight:700…

Вопрос довольно простой. Я использую Bootstrap, где все смелые вещи CSSized в tag { font-weight: bold; } но я использую Open Sans (как и многие другие), где font-weight: 400 недостаточно, а…

В настоящее время я использую {font-weight:bold} для шрифта Arial, но он кажется слишком толстым. Могу ли я сделать вещи немного тоньше? Я не могу найти другого способа сделать это. Я использовал…

Когда я уменьшаю свой css с помощью онлайн-инструмента css, например https://csscompressor.net/ , инструмент преобразует font-weight:bold в font-weight:700;, font-weight:normal в font-weight:400;…

Я получаю ошибку валидатора для своих таблиц стилей, но не знаю, как ее решить. Ошибка: Value Error : font-weight lighter is not a font-weight value : lighter И CSS, вызывающий ошибку: @font-face {…

Я не могу сделать это regex правильно, и я не вижу, что я упускаю. См. пример Regex101 или разбивку ниже: Regex <span.*?font-weight:700.*?>(.*?)<\/span> Я пытаюсь найти каждый экземпляр…

Я импортировал шрифты Montserrat(400 700 и 900) и Ubuntu(400) из google fonts, но похоже, что работают только Montserrat 400 и Ubuntu 400, я не могу использовать Montserrat 700 или Montserrat 900. Я…

Изучаем свойство font-weight CSS

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

CSS

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» зависят от вычисляемой толщины шрифта родительского элемента. Браузер будет искать ближайшую к «bolder» или «lighter» толщину в семействе шрифта. Иначе браузер просто установит «400» или «700«.

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

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

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

Bold} Не Работает В Мобильном-Хром

Mobile-хром упрямо переопределяет мой запрос на шрифт-вес: жирный шрифт. Я пробовал все разумное, в том числе увеличивая «специфичность», добавляя id и даже страшное правило «! Important». Ничего не сработало. Я получаю желаемый эффект от своих настольных браузеров, просто не на моем Android HTC One S9, использующем мобильный хром.

В идеале я бы хотел получить чистое решение CSS, поскольку html будет сгенерирован другой программой, и будет немного утомительно писать регулярное выражение script для обработки всех случаев использования, и я бы предпочел не иметь добавлять теги <strong> везде, когда это должно быть таким простым исправлением CSS. Код ниже — это всего лишь минимальная выборка гораздо большего количества веб-страниц.

Некоторые вопросы:

Есть ли в этом чистом CSS-решение, где мне не нужно изменять html?

Где я могу найти таблицу стилей CSS по умолчанию, которую использует мобильный хром? Даже если я не могу изменить его, просто видя, что это может помочь мне что-то понять.

Я признаю, что интерфейс Chrome DevTools меня смутил. Я подключил свой телефон к ноутбуку и действительно увидел нежелательный вывод, но я не знаю, что я должен искать, чтобы отладить проблему. Любая помощь приветствуется.

Жаль, что требуется 3 часа, чтобы выделить текст жирным шрифтом. Код и ссылки ниже.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS test</title>
<style type="text/css">
code {font-weight:bold;}
code var {font-weight:normal;}
</style>
</head>
<body>
<code>I want this bold.<br><var>I don't want this bold.</var></code>
</body>
</html>

Здесь фактическая веб-страница

Здесь отображается изображение мобильного вида на хром DevTools, показывающее проблему

Как сделать текст жирным в HTML?

Может кто-нибудь сказать мне, что я делаю не так?

«bold» никогда не был элементом HTML («b» — наиболее близкое совпадение).

HTML должен содержать структурированный контент; Издатель CSS должен предложить стили для этого контента. Таким образом, пользовательские агенты могут предоставлять структурированный контент с полезными стилями и навигационными элементами управления пользователям, которые не видят предложенный вами жирный стиль (например, пользователи поисковых систем, полностью слепые пользователи, использующие программы чтения с экрана, плохо зрячие пользователи, использующие свои собственные цвета и шрифты, вызывающие пользователи, использующие текстовые браузеры, пользователи голосовых браузеров, таких как Opera для Windows). Таким образом, правильный способ сделать текст жирным, зависит от того, почему вы хотите сделать его жирным. Например:

• Хотите отличить заголовки от другого текста? Используйте элементы заголовка (от «h2» до «h6») и предложите для них выделенный жирный стиль в CSS («h2, h3, h4, h5, h5, h6 {font-weight: bold;}».

• Хотите подбодрить ярлыки для полей формы? Используйте элемент «label», программно свяжите его с соответствующим элементом «select», «input» или «textarea», присвоив ему атрибут «for», соответствующий атрибуту «id» на цели, и предложите жирный стиль для это внутри вашего CSS («label {font-weight: bold;»}).

• Хотите выделить заголовок для группы связанных полей в форме, такой как группа выбора радио? Окружите их элементом «fieldset», присвойте ему элемент «legend» и предложите смелый стиль для него в вашем CSS («legend {font-weight: bold;}»).

• Хотите отличить заголовок таблицы от заголовка таблицы? Используйте элемент «caption» и предложите для него смелый стиль в своем CSS («caption {font-weight: bold;}»).

• Хотите отличить заголовки таблиц от ячеек данных таблицы? Используйте элемент th и предложите для него выделенный жирный стиль в CSS («th {font-weight: bold;}»).

• Хотите отличить название фильма или альбома, на который ссылаются, от окружающего текста? Используйте элемент «cite» с классом («cite class =» movie-title «) и предложите смелый стиль для него в вашем CSS (» .movie-title {font-weight: bold;} «).

• Хотите отличить определенное ключевое слово от окружающего текста, определяющего или объясняющего его? Используйте элемент «dfn» и предложите смелый стиль для него в вашем CSS («dfn {font-weight: bold;}»).

• Хотите отличить компьютерный код от окружающего текста? Используйте элемент «code» и предложите для него смелый стиль в своем CSS («code {font-weight: bold;}»).

• Хотите отличить имя переменной от окружающего текста? Используйте элемент «var» и предложите смелый стиль для него в вашем CSS («var {font-weight: bold;}»).

• Хотите указать, что какой-то текст был добавлен в качестве обновления? Используйте элемент «ins» и предложите смелый стиль для него в вашем CSS («ins {font-weight: bold;}»).

• Хотите слегка подчеркнуть текст («Я люблю котят!»)? Используйте элемент «em» и предложите смелый стиль для него в вашем CSS (например, «em {font-weight: bold;}»).

• Хотите сильно подчеркнуть текст, возможно, для предупреждения (« Берегите собаку! »)? Используйте элемент «strong» и предложите смелый стиль для него в вашем CSS (например, «strong {font-weight: bold;}»).

… Вы поняли (надеюсь).

Не можете найти элемент HTML с правильной семантикой для выражения / почему / вы хотите сделать этот конкретный текст жирным? Оберните его в общий элемент «span», дайте ему осмысленное имя класса, которое выражает ваше обоснование для различения этого текста («<span class =» lede «> Позвольте мне начать эту новостную статью с предложения, которое суммирует его. </ Span >) и предложите смелый стиль для него в вашем CSS («.lede {font-weight: bold;»}. Прежде чем создавать собственные имена классов, вы можете проверить, есть ли микроформат (microformats.org) или общее соглашение о том, что вы хотите выразить.

Как исправить проблему font-weight в состоянии hover

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

Определяем проблему

Сначала давайте определим проблему на простом примере. Рассмотрим рисунок ниже:

Пункты меню – ссылки, т.е. в CSS будет что-то типа:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

a:hover { font-weight: bold; }

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

.active { font-weight: bold; }

Мы также изменили текст второго пункта на первый, чтобы они были равны:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Надо сказать, что делать элемент жирным при наведении мыши не принято, но иногда может пригодиться.

Решение №1: задать всем пунктам ширину

Как говорилось выше, самый очевидный способ это задать всем пунктам меню ширину. В нашем примере мы задали ширину всех пунктов меню в 24%. Результат:

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

Решение №2: Text Shadow

Используя text-shadow, можно сымитировать эффект font-weight. Сделать это можно, правильно подобрав значение blur-radius.

В зависимости от используемых шрифтов в проекте можно скомбинировать свойства text-shadow и letter-spacing и создать красивые эффекты для текста. Чтобы продемонстрировать данный эффект, мы добавили пару строк CSS кода к нашим ссылкам:

a { letter-spacing: .1em; transition: text-shadow .3s; } a:hover { text-shadow: 0 0 .65px #333, 0 0 .65px #333; /* раскомментируйте строку ниже, если нужен более сильный эффект */ /* text-shadow: 0 0 .9px #333, 0 0 .9px #333, 0 0 .9px #333; */ }

Таким образом мы решили проблему со сдвигом текста, и нам не пришлось добавлять какую-либо ширину к элементам. И, как видите, данное решение намного лучше, чем font-weight, так как размер текста не изменяется вообще. Глазу намного приятнее.

Заключение

Если бы мне нужно было решить такую проблему, я воспользовался бы одним из двух представленных решений. А вы знаете какие-либо другие способы решения данной задачи? Пишите об этом в комментариях.

Автор: George Martsoukos

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Утилиты

С помощью адаптивного модификатора .t вы можете менять оформление текста для различных видов устройств.

Размер шрифта

Использование модификатора: .t{контрольная точка}-{размер}

• Контрольная точка. Необязательный параметр. Изменяет размер шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
• Размер. Обязательный параметр. Указывает размер шрифта. Принимает значение от -3 до 7:
  • -3 – 0.65 х базовый размер шрифта
  • -2 – 0.75 х базовый размер шрифта
  • -1 – 0.85 х базовый размер шрифта
  • 0 – 1 х базовый размер шрифта
  • 1 – 1.25 х базовый размер шрифта
  • 2 – 1.5 х базовый размер шрифта
  • 3 – 2 х базовый размер шрифта
  • 4 – 2.5 х базовый размер шрифта
  • 5 – 3 х базовый размер шрифта
  • 6 – 4 х базовый размер шрифта
  • 7 – 6 х базовый размер шрифта

Text font size -3

Text font size -2

Text font size -1

Text font size 0 (default)

Text font size 1

Text font size 2

Text font size 3

Text font size 4

Text font size 5

Text font size 6

Text font size 7

<p>Text font size -3</p>
<p>Text font size -2</p>	
<p>Text font size -1</p>
<p>Text font size 0 (default)</p>
<p>Text font size 1</p>
<p>Text font size 2</p>
<p>Text font size 3</p>
<p>Text font size 4</p>
<p>Text font size 5</p>
<p>Text font size 6</p>
<p>Text font size 7</p>

Адаптивный размер шрифта

Вы можете использовать параметры контрольных точек для измеения размера шрифта при различных разрешениях. Для просмотра демононстрации — измените разршение экрана.

При использовании нескольких модификаторов размера шрифта текста подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Text font size -3 (<md)

Text font size -2 (<md)

Text font size -1 (<md)

Text font size 0 (default) (<md)

Text font size 1 (<md)

Text font size 2 (<md)

Text font size 3 (<md)

Text font size 4 (<md)

Text font size 5 (<md)

Text font size 6 (<md)

Text font size 7 (<md)

<p>Text font size -3</p>
<p>Text font size -2</p>	
<p>Text font size -1</p>
<p>Text font size 0 (default)</p>
<p>Text font size 1</p>
<p>Text font size 2</p>
<p>Text font size 3</p>
<p>Text font size 4</p>
<p>Text font size 5</p>
<p>Text font size 6</p>
<p>Text font size 7</p>

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

Использование модификатора: .t{контрольная точка}-{толщина}

• Контрольная точка. Необязательный параметр. Изменяет толщину шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
• Толщина. Обязательный параметр. Указывает толщину шрифта. Принимает значения:
  • light – толщина шрифта 300
  • regular – нормальная толщина шрифта
  • medium – толщина шрифта 500
  • bold – толщина шрифта жирная

Text font weight light

Text font weight regular

Text font weight medium

Text font weight bold

<p>Text font weight light</p>
<p>Text font weight regular</p>	
<p>Text font weight medium</p>
<p>Text font weight bold</p>

Адаптивная толщина шрифта

Вы можете использовать параметры контрольных точек для измеения толщины шрифта при различных разрешениях. Для просмотра демононстрации — измените разршение экрана.

При использовании нескольких модификаторов толщины шрифта подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Text font weight light (<md)

Text font weight regular (<md)

Text font weight medium (<md)

Text font weight bold (<md)

<p>Text font weight light</p>
<p>Text font weight regular</p>
<p>Text font weight medium</p>
<p>Text font weight bold</p>

Стиль шрифта

Использование модификатора: .t{контрольная точка}-{стиль}

• Контрольная точка. Необязательный параметр. Изменяет стиль шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
• Стиль. Обязательный параметр. Указывает стиль шрифта. Принимает значения:
  • normal – нормальный шрифт
  • italic – курсивный шрифт

Text font style normal

Text font style italic

<p>Text font style normal</p>
<p>Text font style italic</p>

Адаптивный стиль шрифта

Вы можете использовать параметры контрольных точек для измеения стиля шрифта при различных разрешениях. Для просмотра демононстрации — измените разршение экрана.

При использовании нескольких модификаторов стиля подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Text font style italic (<md)

<p>Text font style italic</p>

Выравнивание текста

Использование модификатора: .t{контрольная точка}-{выравнивание}

• Контрольная точка. Необязательный параметр. Изменяет стиль шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
• Выравнивание. Обязательный параметр. Указывает выравнивание текста. Принимает значения:
  • left – выравнивание по левому краю
  • right – выравнивание по правому краю
  • center – выравнивание по центру
  • justufy – выравнивание по ширине

Text align left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text align right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text align center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text align justufy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

<p>Text align left</p>
<p>Text align right</p>	
<p>Text align center</p>
<p>Text align justufy</p>

Адаптивное выравнивание текста

Вы можете использовать параметры контрольных точек для измеения параметра выравнивания текста. Для просмотра демононстрации — измените разршение экрана.

При использовании нескольких модификаторов выравнивания текста подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Text align right (<md)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text align center (<md)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text align justufy (<md)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

<p>Text align right</p>	
<p>Text align center</p>
<p>Text align justufy</p>

Длина строки текста

Использование модификатора: .t{контрольная точка}-{размер}

• Контрольная точка. Необязательный параметр. Изменяет размер строки текста только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
• Размер. Обязательный параметр. Определяет длину строки текста. Принимает значения:
  • measure – длина строки ~66 символов
  • measure-narrow – длина строки ~45 символов
  • measure-wide – длина строки ~80 символов

Text measure

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text measure-narrow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text measure-wide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

<p>Text measure</p>
<p>Text measure-narrow</p>
<p>Text measure-wide</p>

Адаптивная длина строки текста

Вы можете использовать параметры контрольных точек для измеения параметра длины строки текста. Для просмотра демононстрации — измените разршение экрана.

При использовании нескольких модификаторов длины строки текста подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Text measure-narrow (<md)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text measure-wide (<md)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

<p>Text measure-narrow (<md)</p>	
<p>Text measure-wide (<md)</p>

CSS: в чем разница между «жирным» и «жирным» стилями шрифта?

Сначала нам нужно понять разницу между указанным весом, вычисленным весом и визуализированным весом.

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

Для более полужирным указанный вес является «более жирным», а вычисленный вес равен «400», если вычисленный вес элемента контейнера меньше или равен 300, в противном случае — «700», если вычисленный вес элемента контейнера составляет меньше или равно 500, иначе «900». Толщина визуализации снова зависит от шрифта с той же гарантией.

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

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

Чтобы проиллюстрировать это, см. Этот JsFiddle: http://jsfiddle.net/UgAa5/ ¹

  p {font-weight: 300; font-size: 2em}
# сценарий1 b {font-weight: жирнее; }
# сценарий2 b {font-weight: bold; }  

  

     простой 
     жирный? 



     простой 
     жирный? 
  

¹ _{Текущие версии IE, Firefox, Chrome и Opera демонстрируют это правильно.Старые браузеры, такие как Safari 5.1, этого не делают.}

² _{В спецификации HTML5 сказано, что элемент должен иметь начальную толщину шрифта «смелее». Firefox и IE делают это, но браузеры на основе webkit / blink по умолчанию используют полужирный шрифт, а normalize.css применяет font-weight: bold к элементу для всех браузеров.}

html — Устаревший код: vs

Правильный вопрос: «Какая разметка лучше всего описывает мой контент?»

Начнем с тега (это , а не , устаревший):

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

…

Не следует использовать теги b и i, если есть более описательные и соответствующий тег доступен. Если вы их используете, обычно лучше добавить атрибуты класса, описывающие предполагаемое значение разметки, так что вы можете отличить одно использование от другого.

…

Это может помочь думать о элементах b или i как об элементах диапазона. с автоматическим резервным стилем. Как и элемент span, эти элементы обычно получают выгоду от имен классов, если они хотят быть полезными.

http://www.w3.org/International/questions/qa-b-and-i-tags

Для сравнения: имеет более конкретное назначение:

Элемент strong представляет собой фрагмент текста с высокой важностью.

http://www.w3.org/TR/html-markup/strong.html

Например:

  
  Предупреждение.  Вот драконы. 
  

_{Здесь мы выделяем слово «предупреждение», чтобы подчеркнуть его важность.}

Но не:

  
  Элемент 1:  Foo, bar и baz. 
  

_{«Элемент 1» не предназначен для подчеркивания, поэтому — неправильный тег. Более того, возможно, что вся структура могла бы быть представлена ​​лучше.}

Если значение текста имеет большое значение, подходит (как в этой строке).

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

   Привет, мир 

.product-name {font-weight: жирный; }
  

Во всех случаях:

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

Будет ли лучше, потому что если у кого-то отключен css на браузер, все равно будет отображаться правильно?

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

Дополнительное чтение:

html — Почему уже выделенный жирным шрифтом текст отображается как «супер жирный»?

Хотя различные ссылки в других сообщениях могут кое-что объяснить, политика SO заключается в том, чтобы всегда иметь ответы на той же странице, что и вопросы, чтобы избежать необходимости нажимать на все эти ссылки.

Итак, поехали.

Ответ — во встроенных в браузер таблицах стилей. h2 имеет font-weight: жирный по умолчанию, а b и strong имеет font-weight: жирный .

Теперь есть много шрифтов различной толщины. У нас есть не только обычный и полужирный, у нас есть 9 различных, пронумерованных от 100 до 900.² Нормальный вес — 400, а определение жирным шрифтом — 700. Определение жирнее — «жирнее, чем вес шрифта родительского «.

Итак, если у вас h2 с b внутри, h2 будет полужирным (т. Е. Весом 700), а b внутри будет более жирным (т. Е. Более жирным, чем 700).

Вот и все.
Зная это, есть несколько решений:

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

• Напишите b {font-weight: bold} в своей таблице стилей, или, если быть более точным, h2> * {font-weight: inherit} , чтобы содержимое h2 всегда было одинакового веса, не важно что.

• Просто удалите теги из содержимого h2. В данном конкретном случае я не вижу смысла их использовать.

• Или оставьте все как есть и согласитесь, что вы можете поместить текст в h2, который будет еще жирнее. Это может найти свое применение:

  Назад к

  Основам!

¹ Однако это не во всех браузерах. Вот почему нам нужно сбросить таблицы стилей.

² Не все шрифты имеют полную толщину.У многих всего два.

font-weight · Документы WebPlatform

Резюме

Свойство font-weight определяет насыщенность или жирность шрифта (степень черноты или толщину штриха). Обратите внимание, что некоторые шрифты доступны не во всех размерах; некоторые доступны только с обычным и жирным шрифтом.

Обзорная таблица

Начальное значение

нормальный

Относится к

Все элементы

Унаследовано

Да

Медиа

визуал

Расчетное значение

Ключевое слово или числовое значение, как указано, более жирное и светлое, преобразованное в действительное значение.

Анимационный

Да

Свойство объектной модели CSS

шрифт Вес

В процентах

НЕТ

Синтаксис

• font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900
• font-weight: жирный
• font-weight: жирный
• font-weight: более светлый
• font-weight: normal

Значения

нормальный

Нормальная толщина шрифта.То же, что 400 .

полужирный

Жирный шрифт. То же, что 700 .

зажигалка

На один вес шрифта легче родительского элемента (среди доступных толщин шрифта).

полужирный

На одну толщину шрифта темнее, чем у родительского элемента (среди доступных толщин шрифта).

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

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

Примеры

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

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

  p {font-size: 150%; }

p.example-one {font-weight: bold; }
p.example-two {font-weight: 600; }
p.example-three {font-weight: lighter; }
  

Посмотреть живой пример

Использование

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

600-900 используйте ближайший доступный более темный вес (или, если его нет, ближайший доступный более легкий вес).
100-500 используйте ближайший доступный более легкий вес (или, если его нет, ближайший доступный более темный вес).
Это означает, что для шрифтов, которые содержат только обычный и полужирный шрифт, 100-500 являются нормальными, а 600-900 — полужирным.

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

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

• 100 — Тонкий
• 200 — Extra Light (Ультра легкий)
• 300 — Легкая
• 400 — Нормальный
• 500 — средний
• 600 — полужирный (Demi Bold)
• 700 — Жирный
• 800 — Extra Bold (Ультра жирный)
• 900 — Черный (тяжелый)

Связанные спецификации

Модуль шрифтов CSS, уровень 3

W3C Рабочий проект

Переходы CSS

W3C Рабочий проект

См. Также

Внешние ресурсы

Атрибуции

Font Weight не рекомендуется в HTML5, но вот новый CSS »

Устарел, HTML-атрибуты

  h3 {font-weight: 900; }