Шрифт-вага - CSS-хитрощі

Anonim

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
Працює Працює Працює Працює Працює Працює Працює