font-weight
Властивість встановлює вага, або товщину, шрифт і залежать або від наявних граней шрифту всередині сімейства шрифтів або ваги , певне в браузері.
span ( font-weight: bold; )
font-weight
Властивість приймає або ключове слово або значення , зумовлене числове значення. Доступні ключові слова:
normal
bold
bolder
lighter
Доступні числові значення:
100
200
300
400
500
600
700
800
900
Значення ключового слова normal
відображається на числове значення, 400
а значення bold
відображається на 700
.
Для того, щоб побачити будь-який ефект із використанням значень, відмінних від 400
або 700
, використовуваний шрифт повинен мати вбудовані грані, які відповідають зазначеним вагам.
Якщо шрифт має жирну («700») або звичайну («400») версію як частину сімейства шрифтів, браузер використовуватиме це. Якщо вони недоступні, браузер імітує власну напівжирну або звичайну версію шрифту. Це не буде імітувати інші недоступні ваги. Шрифти часто використовують такі назви, як "Звичайний" та "Світло", щоб визначити будь-яку альтернативну вагу шрифту.
Наступна демонстрація демонструє використання альтернативних значень ваги:
Перевірте цю ручку!
У наведеній вище демонстрації використовується безкоштовний шрифт Open Sans, вбудований за допомогою API веб-шрифтів Google. Шрифт завантажується з усіма доступними вагами шрифта, і тому, використовуючи font-weight
властивість, відображаються різні доступні ваги, як описано в тексті кожного абзацу. Недоступні ваги просто відображають логічно найближчу вагу.
Звичайні шрифти, такі як Arial, Helvetica, Georgia та ін., Не мають ваг, окрім 400
і 700
. Тож одна і та ж демонстрація, показана з одним із цих шрифтів, відображатиме лише два ваги у дев’яти абзацах.
Використання ключових слів «сміливіше» та «легше»
Значення ключового слова bolder
і lighter
відносно обчисленої ваги шрифту батьківського елемента. Браузер шукатиме найближчу “сміливішу” чи “легшу” вагу, залежно від того, що доступне у сімействі шрифтів, інакше він просто вибере “400” або “700”, залежно від того, який з них має найбільший сенс.
Дочірні елементи не успадковуватимуть значення сміливішого та легшого ключових слів, а натомість успадкують обчислену вагу.
Підтримка браузера
Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
---|---|---|---|---|---|---|
Працює | Працює | Працює | Працює | Працює | Працює | Працює |