Почему какие‑то значения 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Поделиться
Запинить
Твитнуть
Свежак
Толщина шрифта — font-weight — fast-mas.ru
Для чего нужно?
С помощью этого свойства можно изменить толщину шрифта. В качесвте значения указываются ключевые слова normal, bold, bolder (делает шрифт толще, чем в родительском элементе), lighter (делает шрифт тоньше, чем в родительском элементе). Или же такие числовые значения:
100,
200,
300,
400,
500,
600,
700,
800,
900.
Существует подобная таблица, в ней указаны соответствия этих чисел названиям насыщенности (они не используются для значений, кроме normal и bold, являющихся ключевыми словами):
| 100 | Thin |
| 200 | Extra Light |
| 300 | Light |
| 400 | Normal |
| 500 | Medium |
| 600 | Semi Bold |
| 700 | Bold |
| 800 | Extra Bold |
| 900 | Black |
| 950 | Extra Black |
Обратите внимание, что большинсвто шрифтов не принимают каждое из значений. В примере ниже мы увидим это.
Глобальные значения:
- inherit — наследует значение от родительского блока.
- initial — устанавливает свойство по умолчанию.
- unset — если свойство имеет возможность унаследовать значение родителя, то работает как inherit, если нет, то как initial.
Дополнительно о свойстве
- ⊳ Значение по умолчанию — normal
- ⊳ Значение наследуется от родительского элемента
- ⊳ Объектная модель документа (DOM):
object.style.fontWeight = ‘bold’
Информация взята из официальной
Запись в CSS-коде:
селектор { font-weight: значение; }
Поддержка браузерами.
Какие браузеры и их версии поддерживают данное свойство, можно узнать по ссылке:
https://caniuse.com/?search=font-weightПример использования:
<!DOCTYPE html>
<html>
<head>
<meta charset=»UTF-8″>
<title>font-weight</title>
<style>
h2 {
font-weight: lighter;
}
p {
font-weight: bold;
font-family: ‘Times’, serif;
}
.
Результат:
Возникает вопрос, почему шрифты со значениями bold, 900 и bolder не отличаются? Как написано выше, многие шрифты попросту не поддерживают все значения.— вес шрифта: 700 или вес шрифта: полужирный, какой из них мы должны следовать в CSS?
спросил
Изменено 2 года, 9 месяцев назад
Просмотрено 45 тысяч раз
Я видел несколько сайтов, которые упоминаются в CSS — font-weight: 700 или вес шрифта: полужирный .
- css
- рендеринг текста
3
Вы можете найти полную разбивку всех допустимых значений для font-weight в Спецификации уровня 3 модуля шрифтов CSS. В разделе 3.2 (свойство font-weight) мы находим следующий список:
- 100 — Thin
- 200 — Сверхлегкий (Сверхлегкий)
- 300 — светлый
- 400 — Обычный
- 500 — Средний
- 600 — полужирный (полужирный)
- 700 — полужирный
- 800 — очень жирный (сверхжирный)
- 900 — Черный (тяжелый)
Вы, наверное, заметили, что 700 выделено жирным шрифтом. Так что в любом случае вы получите одинаковые результаты. (Единственный другой, который соответствует номеру, является «нормальным» — 400 .
)
Полный список:
обычный — То же, что и «400»
жирный — То же, что и «700» чем унаследованное значение
Нет реальной разницы. Это больше о том, к чему вы и ваша команда привыкли.
вес шрифта в цифрах лучше, чем по умолчанию жирный , потому что в цифрах вы можете настроить жирный в соответствии с вашими требованиями к дизайну.
Проверьте это http://www.w3.org/wiki/CSS/Properties/font-weight
5
Мой основной ответ такой же, как уже дан дважды, но с правильной ссылкой:
Они являются синонимами по определению, согласно спецификации CSS 2.1, пункт 15.6. Это авторитетная спецификация.
Ключевое слово «обычный» является синонимом «400», а «жирный» — синонимом «700».
Слово жирным шрифтом делает код более читаемым, чем число 700 , которое не имеет интуитивного значения.
Число может быть более подходящим для удобочитаемости в ситуациях, когда вы указываете насыщенность шрифта с помощью чисел, чтобы получить насыщенность, для которой нет ключевых слов. Такие ситуации случаются редко, отчасти потому, что вес шрифта, отличный от 400 и 700 , не поддерживается для большинства шрифтов.
2
Функционально они равны, но по стилю я бы сказал, выберите один из методов и соблюдайте его: либо вы используете только ключевые слова, либо только числовые идентификаторы. Это упрощает понимание кода CSS.
Поскольку шрифты имеют гораздо более широкий спектр насыщенности, чем только обычный и полужирный , например. сверхлегкий , легкий , книжный , средний , полужирный , черный , экстра черный , при использовании пользовательских шрифтов обычно невозможно не использовать числовые идентификаторы.
обычный и полужирный , используя вместо этого 400 и 700 . Это более последовательно и упрощает понимание CSS — даже неопытный разработчик может легко понять, что 400 тоньше, чем 500 , но он может не знать, какой из них тоньше, когда ему нужно сравнить обычный и 500 . В ситуациях, когда используются только весовые коэффициенты обычный и полужирный , вполне разумно и удобнее использовать ключевые слова вместо числовых идентификаторов. Но на моей работе таких ситуаций почти не бывает.
В некоторых браузерах в Windows (IE, FF) выполнение font-weight: жирный или font-weight: жирнее ..
Я узнал об этом на горьком опыте, работая над материалом для BBC Kyrgyzstan .
.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
css — есть ли разница между полужирным шрифтом и 700 при использовании веб-шрифтов?
спросил
Изменено 6 лет, 5 месяцев назад
Просмотрено 2к раз
Я недавно слышал (и на самом деле я не очень верю), что когда вы определяете @font-face с font-weight , например, 700 , и вы используете где-то в CSS font-weight: жирный , что браузер может визуализировать сам шрифт с толщиной шрифта , используя полужирный шрифт.
Действительно ли есть такая разница между 700 и полужирный в таком случае?
Так что я спрашиваю: учитывая такое определение
@font-face {
семейство шрифтов: SampleFont;
источник: ...;
вес шрифта: 700;
}
Будут ли все браузеры (в соответствии со спецификацией) использовать указанный файл для SampleFont в следующих случаях?
.case1 { вес шрифта: 700; }
.case2 { вес шрифта: полужирный; }
Я спрашиваю, если вы определяете @font-face с числовым значением, например, 700 (или наоборот), а затем использовать его эквивалент где-то в CSS (в данном случае жирный ), некоторые браузеры могут использовать искусственный полужирный текст вместо того, который определен через @font-face.
Спасибо специалистам!
- css
- шрифты
5
Между ними нет никакой разницы.
Возможно, использование его как font-weight:bold сделает ваш код более читабельным, чем использование font-weight:700 .
Вы также можете использовать другие значения около font-weight .
- 100 — тонкий
- 200 — Сверхлегкий (Сверхлегкий)
- 300 — светлый
- 400 — Обычный
- 500 — Средний
- 600 — полужирный
- 700 — полужирный
- 800 — очень жирный (сверхжирный)
- 900 — Черный (тяжелый)
‘ font-weight:normal ‘ является синонимом ‘ font-weight:400 ‘ и ‘ font-weight:bold ‘ является синонимом ‘ вес шрифта: 700 ‘.
2
IIRC некоторые шрифты поддерживают несколько уровней жирности, а некоторые нет,
поэтому, если шрифт поддерживает эту функцию, будет небольшая разница, но в остальном оба выглядят одинаково и выделяются жирным шрифтом.
