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

Содержание

font-weight:700 или font-weight:bold какой из них мы должны следовать в CSS?



Я видел некоторые сайты, которые упоминались в CSS — font-weight: 700 или font-weight: bold . Но оба результата одинаковы. Какой из них правильный и как мы должны следовать? Пожалуйста, предложите мне.

css text-rendering
Поделиться Источник Pavan Kumar     06 июня 2012 в 06:34

5 ответов


  • Изменить CSS «bold» свойство font-weight value

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

  • Правильно определите стили (font-style/font-weight) для webfonts

    Я использую веб-шрифты Google и не совсем уверен, как правильно определить font-style / font-weight . В чем разница в определении normal или 400 в качестве желаемого веса шрифта для обычной основной копии? Я просто определяю font-style: italic; или ссылаюсь на курсивный шрифт? Код : <link…



96

Вы можете найти полную разбивку всех допустимых значений для font-weight в спецификации уровня 3 модуля шрифтов CSS . В разделе 3.2 (свойство font-weight) мы находим следующий список:

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

Вы, вероятно, заметили, что 700 -это «bold». Так что в любом случае вы получите те же результаты. (Единственный другой, который соответствует числу, — это «normal» —

400 .)

Полный список:

normal — То же, что » 400’
bold — То же, что » 700’
bolder — Указывает более жирный вес, чем унаследованное значение
lighter — Указывает меньший вес, чем унаследованное значение

Нет никакой реальной разницы. Это больше о том, к чему вы и ваша команда привыкли.

Поделиться Sampson     06 июня 2012 в 06:35



19

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

Проверьте это http://www.w3.org/wiki/CSS/Свойства/вес шрифта

Поделиться sandeep     06 июня 2012 в 06:41



16

Мой основной ответ такой же, как и уже дважды, но с правильной ссылкой:

Они являются синонимами по определению, согласно спецификации CSS 2.1, пункт 15.6 . Это авторитетная спецификация.

Ключевое слово ‘normal’ является синонимом ‘400’, а ‘bold’-синонимом ‘700’.

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

Поделиться Jukka K. Korpela

    06 июня 2012 в 07:06



1

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

Поскольку шрифты имеют гораздо более широкий спектр весов , чем только regular и bold, например, extra light , light , book , medium , semibold , black , extra black , при использовании пользовательских шрифтов обычно невозможно не использовать числовые идентификаторы. В этих ситуациях я думаю, что лучше вообще не использовать regular и bold , а вместо этого использовать 400 и 700 . Это более последовательно и упрощает понимание CSS — даже неопытный разработчик может легко понять , что

400 тоньше, чем 500, но он может не знать, какой из них тоньше, когда ему нужно сравнить regular и 500 .

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

Поделиться Robert Kusznier     15 февраля 2018 в 12:50


  • Регулировка font-weight:bold

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

  • Для жирного до 700 для нормального до 400 при уменьшении css

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



0

В некоторых браузерах на Windows (IE, FF) выполнение font-weight:800 не будет работать с различными шрифтами UTF-8.. Используйте font-weight: bold или font-weight: bolder ..

Я понял это на собственном горьком опыте, когда создавал вещь для Би-би-си ..

Поделиться scottj     02 августа 2016 в 16:38


Похожие вопросы:


изменить CSS где font-weight:800

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


Как правильно объявить CSS font-face с font-weight и font-style?

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


Полезны ли все значения свойства CSS font-weight?

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…


Изменить CSS «bold» свойство font-weight value

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


Правильно определите стили (font-style/font-weight) для webfonts

Я использую веб-шрифты Google и не совсем уверен, как правильно определить font-style / font-weight . В чем разница в определении normal или 400 в качестве желаемого веса шрифта для обычной основной…


Регулировка font-weight:bold

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


Для жирного до 700 для нормального до 400 при уменьшении css

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


font-weight lighter-это не значение font-weight

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


PHP regex span font-weight 700 to strong tag

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


CSS свойство font-weight отображает только обычный вес

Я импортировал шрифты 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«, но вместо этого наследуют вычисленную толщину.

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

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

Данная публикация является переводом статьи «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; }

a:hover {

  font-weight: bold;

}

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

.active { font-weight: bold; }

.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; */ }

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-атрибуты

Раскрытие: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Узнать больше
Атрибут
HTML Tag
Что делает шрифт устаревшим в HTML5, а вот новый CSS ?
Используется для обозначения веса (жирности) текста. Устарело. Вместо этого используйте CSS.
Элемент Font и его атрибуты устарели Этот атрибут устарел и не должен использоваться. Поддержка этого атрибута браузером ограничена, и его использование может привести к неожиданным результатам. Вместо этого используйте CSS.Узнайте больше, прочитав наше руководство по шрифтам и веб-типографике.

Свойство CSS font-weight указывает, насколько жирным должны быть символы. font-weight может быть присвоено значение, кратное 100, от 100 до 900 (900 — самый жирный). Так, например, это правило (добавленное в документ HTML в теге STYLE или во внешней таблице стилей) гласит, что элементы

должны иметь вес 900:

  h3 {font-weight: 900; }  

, что означает, что элемент

отображается следующим образом:

Weighty Matters

Вы также можете использовать слова «нормальный» (то же, что и 400), «жирный» (то же, что и 700), «Смелее» (относительное утверждение, означающее, что текст жирнее, чем окружающий элемент) или «светлее» (делает текст светлее, чем окружающий элемент).Поскольку немногие шрифты имеют девять оттенков жирности, в большинстве шрифтов от 100 до 500 одинаковы, от 600 до 800 одинаковы, а 900 — самый жирный. Одним из ответвлений этого является то, что, хотя «нормальным» является 400, во многих случаях 100 на самом деле не легче. Если вы не используете гарнитуру со многими доступными значениями толщины шрифта, нет практического способа представить текст с массой, меньшей, чем обычно. Чтобы узнать больше об этой теме, см. Наше руководство по шрифтам и веб-типографике.

Адам — ​​технический писатель, специализирующийся на документации и руководствах для разработчиков.

Плотность шрифта | Система веб-дизайна США (USWDS)

Жетоны дизайна

USWDS имеет до семи токенов темы с толщиной шрифта, взятых из девяти системных токенов.

Токены темы

Жетоны темы с насыщенностью шрифта используют общие имена. Большинство проектов будут использовать только 2-4 из этих токенов, при этом для большинства установлено значение ложных .

Настройте токены веса шрифта темы в настройках темы вашего проекта с помощью доступных токенов веса шрифта системы.Все настройки, связанные с типографикой, находятся в _uswds-theme-typography.scss .

Токен По умолчанию Пример Переменная настроек
тонкий ложный $ тема-шрифт-вес-тонкий
'светлый' 300 Таллахасси $ тема-шрифт-вес-свет
"нормальный" 400 Таллахасси $ тема-шрифт-вес-нормальный
'средний' ложный $ тема-шрифт-вес-средний
полужирный ложный $ тема-шрифт-вес-полужирный
жирный 700 Таллахасси $ тема-шрифт-вес-жирный
тяжелый ложный $ тема-шрифт-тяжелый

Системные токены

В жетонах системы веса шрифта

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

Токен Пример
100 Таллахасси
200 Таллахасси
300 Таллахасси
400 Таллахасси
500 Таллахасси
600 Таллахасси
700 Таллахасси
800 Таллахасси
900 Таллахасси

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

Ваш контекст и стиль кодирования определяют способ доступа к токенам веса шрифта USWDS в коде.

Контекст Использование Пример
функция font-weight (вес) font-weight: font-weight ( 'полужирный' )
миксин u-текст (вес) @include u-text ( 'свет' )
параметр масса $ theme-heading-font-weight: "тяжелый"
утилита .вес текста .text- свет

CSS font-weight

Пример <стиль> п { размер шрифта: 2em; } .жирный { font-weight: жирный; }

Обычный текст. Жирный текст. Опять нормальный.

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

Хотя свойство font-weight обычно используется для указания полужирного текста, его также можно использовать для определения определенного веса начертания шрифта. Многие шрифты бывают разного веса. Вы можете указать, чтобы основной текст отображался светлым шрифтом, например 300 , а индикаторы статей отображались, скажем, 500 . Это предполагает, что такие веса доступны для конкретного используемого шрифта.

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

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

Совет: используйте шрифт , чтобы установить наиболее общие свойства шрифта за один раз.

Синтаксис

вес шрифта: нормальный | жирный | смелее | зажигалка | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Возможные значения

нормальный
То же, что 400 .
полужирный
То же, что 700 .
полужирный
Задает более жирный вес, чем унаследованное значение.
зажигалка
Задает меньший вес, чем унаследованное значение.
100
Тонкий.
200
Extra Light (Ультра легкий).
300
Свет.
400
Нормальный.
500
Средний.
600
Полужирный (Demi Bold).
700
Полужирный.
800
Extra Bold (Ультра жирный).
900
Черный (тяжелый).

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

начальный
Представляет значение, указанное в качестве начального значения свойства.
наследовать
Представляет вычисленное значение свойства родительского элемента.
снято
Это значение действует как при наследовании или при начальном , в зависимости от того, унаследовано свойство или нет.Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.

Общая информация

Начальное значение
нормальный
Относится к
Все элементы
Унаследовано?
Есть
Медиа
Визуальный
Анимационный
Да (см. Пример)

Пример кода

п { font-weight: 300; } сильный { font-weight: жирнее; }

Официальные спецификации

.
Оставить комментарий

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

Ваш адрес email не будет опубликован.

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.