CSS/Свойство font-weight
Синтаксис
CSS 1
CSS 2‒2.2
CSS 3
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit;
Описание
Свойство font-weight устанавливает жирность шрифта.
| Применяется: | ко всем элементам; |
|---|---|
| Наследование: | присутствует; |
| Проценты: | не используются; |
| Медиа: | визуальные. |
JavaScript
[объект]
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| CSS | Раздел | |
|---|---|---|
| 1 | 5.2.5 ‘font-weight’ | Перевод |
| 2 | 15.2.3 Font styling… ‘font-weight’… | |
| 2.1 | 15.6 Font boldness: the ‘font-weight’ property | Перевод |
| 2.2 | 15.6 Font boldness: the ‘font-weight’ property | |
| 3 | 3.2 Font weight: the font-weight property | Перевод |
Значения
- normal
- Устанавливает нормальный вариант шрифта.
font-weight: normal; - bold
- Устанавливает жирный вариант шрифта.
font-weight: bold; - 100, 200, 300, 400, 500, 600, 700, 800, 900
- Указывает степень жирности (варианты жирности). При этом степень жирности равная «
normal», а «700» приравнивается к значению «bold».Примечание: большинство семейств шрифтов, как правило, имеют только «нормальные» и «полужирные» варианты шрифтов;
- bolder
- Увеличивает степень жирности шрифта. За основу берётся значение родительского элемента.
- lighter
- Уменьшает степень жирности шрифта. За основу берётся значение родительского элемента.
- inherit
- Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: «normal».
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свойство font-weight</title>
<style type=»text/css»>
.bold { font-weight: bold; }
.bolder { font-weight: bolder; }
.lighter { font-weight: lighter; }
</style>
</head>
<body>
<h2>Жирность шрифта</h2>
<p>Пример текста с <span>разными</span> <span>вариантами</span> <span>жирности</span>.</p>
</html>
Свойство font-weight
Почему какие‑то значения font‑weight в СSS пишут цифрами, а какие‑то словами?
Я не Аня, но попробую ответить.
В ЦСС font-weight отвечает за «жирность» начертания. Задается в числах от 100 до 900:
Чтобы использовать все девять начертаний, шрифт должен их поддерживать.
В противном случае браузер будет подбирать ближайшее подходящее начертание из тех, что есть в шрифте.
Бюросанс поддерживает три начертания: тонкое, нормальное и жирное. Бюросайн — вариативный шрифт, поддерживает все начертания.
font‑weight
100
Бюросанс
light
Бюросайн
light
font‑weight
200
Бюросанс
light
Бюросайн
light
font‑weight
300
Бюросанс
light
Бюросайн
light
font‑weight
400
Бюросанс
regular
Бюросайн
regular
font‑weight
500
Бюросанс
regular
Бюросайн
regular
font‑weight
600
Бюросанс
bold
Бюросайн
bold
font‑weight
700
Бюросанс
bold
Бюросайн
bold
font‑weight
800
Бюросанс
bold
Бюросайн
bold
font‑weight
900
Бюросанс
bold
Бюросайн
bold
Чтобы использовать все девять начертаний, шрифт должен их поддерживать.
В противном случае браузер будет подбирать ближайшее подходящее начертание из тех, что есть в шрифте.
Бюросанс поддерживает три начертания: тонкое, нормальное и жирное. Бюросайн — вариативный шрифт, поддерживает все начертания.
Кроме числовых значений поддерживаются ключевые слова: normal, bold, lighter и bolder.
normal — это обычное начертание, синоним font-weight: 400:
font‑weight: 400
font‑weight: normal
bold — жирное начертание, синоним font-weight: 700:
font‑weight: 700
font‑weight: bold
Советую использовать ключевые слова, а не их числовые значения: их проще воспринимать, не нужно запоминать магические числа.
Жирность начертания относительно родителя задаётся с помощью lighter и bolder:
В случае с вариативным шрифтом Сафари и Фаерфокс неправильно обрабатывают lighter, bolder. Сравните искусственную разрядку у font‑weight: lighter от 500 и font‑weight: bolder от 300
В случае с вариативным шрифтом Сафари и Фаерфокс неправильно обрабатывают lighter, bolder.
Сравните искусственную разрядку у font‑weight: lighter от 500 и font‑weight: bolder от 300
Ещё по теме
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Поделиться
Запинить
Твитнуть
Свежак
html — Числа шрифта CSS: как они работают?
спросил
Изменено 6 лет, 1 месяц назад
Просмотрено 22к раз
Я пытаюсь использовать ширину шрифта, чтобы настроить жирность шрифта.
Насколько я понимаю, значение 500 — это нормальный вес шрифта, а значение 700 — это вес шрифта по умолчанию для полужирного шрифта.
Однако, когда я поставил 599, шрифт вообще не изменился. Но когда я ставлю 600, он переходит к полужирному шрифту по умолчанию. Те же результаты при значении 600-900. Затем, когда вы превысите 900, вес шрифта вернется к нормальному весу шрифта. Почему это происходит?
#стильшрифта {
граница: 1px сплошной черный;
вес шрифта: 599;
} fontStyle
- html
- css
- шрифты
3
Подробная информация о том, как числовые значения сопоставляются с жирностью шрифта, описана в спецификации, которая гласит:
Значения от 100 до 900 образуют упорядоченную последовательность, где каждое число указывает на вес, который, по крайней мере, такой же темный, как и его предшественник. ключевое слово «обычный» является синонимом «400», а «жирный» является синонимом с «700».
Ключевые слова, отличные от «обычный» и «жирный», были показаны как часто путали с названиями шрифтов, поэтому числовая шкала была выбрали для 9-список значений.
‘599’ не является допустимым значением для свойства font-weight
1
Толщина шрифта по умолчанию — 400, и шрифты работают с числом, кратным 100. 300 — светлый (если ваш шрифт поддерживает его), 400 — обычный, 600 — полужирный и 700 — полужирный. Вы не можете использовать числа между ними.
вес шрифта работает от 100 до 900 с шагом 100. Обычный вес — 400. Полужирный — 700.
599 не является распознаваемым весом, так как он не является приращением 100. Все, что больше 900 тоже не распознается.
Таким образом, вы должны использовать font-weight: 600 для полужирного шрифта или font-weight: 700 для жирного шрифта.
Эта ссылка помогает объяснить https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
Ну, вы использовали 599, вы можете использовать только числа 100, 200, 300 и т.
font-weight: 600 будет работатьЗарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Рендеринг текста— вес шрифта: 700 или вес шрифта: полужирный, какой из них мы должны следовать в CSS?
спросил
Изменено 3 года, 1 месяц назад
Просмотрено 46 тысяч раз
Я видел несколько веб-сайтов, которые упоминали в CSS — font-weight: жирный .
Но оба результата одинаковы. Какой из них правильный и как мы должны следовать? Пожалуйста, предложите мне.
- css
- рендеринг текста
3
Вы можете найти полную разбивку всех допустимых значений для font-weight в Спецификации уровня 3 модуля шрифтов CSS. В разделе 3.2 (свойство font-weight) мы находим следующий список:
- 100 — тонкий
- 200 — Сверхлегкий (Сверхлегкий)
- 300 — светлый
- 400 — Обычный
- 500 — Средний
- 600 — полужирный (полужирный)
- 700 — Жирный
- 800 — Очень жирный (Ultra Bold)
- 900 — Черный (тяжелый)
Вы, наверное, заметили, что 700 выделено жирным шрифтом. Так что в любом случае вы получите одинаковые результаты. (Единственный другой, который соответствует числу, это «нормальный» — 400 .
)
Полный список:
обычный — То же, что и «400»
жирный — То же, что и «700» — Задает меньший вес, чем унаследованное значение
На самом деле разницы нет. Это больше о том, к чему вы и ваша команда привыкли.
3
толщина шрифта в цифрах лучше, чем по умолчанию полужирный , потому что в цифрах вы можете настроить полужирный в соответствии с вашими требованиями к дизайну.
Проверьте это http://www.w3.org/wiki/CSS/Properties/font-weight
5
Мой основной ответ такой же, как уже дан дважды, но с правильной ссылкой:
Они являются синонимами по определению, согласно спецификации CSS 2.1, пункт 15.6. Это авторитетная спецификация.
Ключевое слово «обычный» является синонимом «400», а «жирный» — синонимом «700».
Слово жирным шрифтом делает код более читаемым, чем число 700 , которое не имеет интуитивного значения. Число может быть более подходящим для удобочитаемости в ситуациях, когда вы указываете насыщенность шрифта с помощью чисел, чтобы получить насыщенность, для которой нет ключевых слов. Такие ситуации случаются редко, отчасти потому, что вес шрифта отличается от 400 и 700 9.0036 не поддерживаются для большинства шрифтов.
2
Функционально они равны, но по стилю я бы сказал, выберите один из методов и соблюдайте его: либо вы используете только ключевые слова, либо только числовые идентификаторы. Это упрощает понимание кода CSS.
Поскольку шрифты имеют гораздо более широкий спектр жирности, чем только обычный и полужирный , например. сверхлегкий , легкий , книжный , средний , полужирный , черный , экстра черный , при использовании пользовательских шрифтов обычно невозможно не использовать числовые идентификаторы.
В этих ситуациях я думаю, что лучше вообще не использовать обычный и полужирный , используя вместо этого 400 и 700 . Это более последовательно и упрощает понимание CSS — даже неопытный разработчик легко поймет, что 400 тоньше, чем 9.0035 500 , но он может не знать, какой из них тоньше, когда ему нужно сравнить обычный и 500 .
В ситуациях, когда используются только веса обычный и полужирный , вполне разумно и удобнее использовать ключевые слова вместо числовых идентификаторов. Но на моей работе таких ситуаций почти не бывает.
В некоторых браузерах в Windows (IE, FF) выполнение font-weight:800 не будет работать с различными шрифтами UTF-8. Используйте насыщенность шрифта: полужирный или насыщенность шрифта: жирнее ..
Я обнаружил это на собственном горьком опыте, работая над материалом для BBC Kyrgyzstan .
