Как сделать не жирный шрифт css
Перейти к содержимому

Как сделать не жирный шрифт css

  • автор:

Жирность текста в CSS

В данном уроке мы изучим свойство font-weight , которое позволяет сделать текст жирным или наоборот — отменить жирность (к примеру, для заголовков, которые жирные по умолчанию). Чтобы сделать текст жирным, следует указать значение bold , а чтобы отменить жирность — значение normal .

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

Если бы я делал жирный через тег b — мне пришлось бы содержимое каждого абзаца обернуть в этот тег, а это было бы очень затратным по времени (а если я потом захочу убрать жирность абзацам — мне придется убирать все эти теги, представьте, сколько это лишней, бесполезной работы).

В следующем примере мы сделаем все абзацы жирными, а все заголовки h2 — нежирными:

Title

This is a paragraph with text.

h2 < font-weight: normal; >p < font-weight: bold; >

Скопируйте следующий HTML код себе на страницу:

Name Surname Salary
John Smith 200$
Nick Mayers 300$
Alex Jonson 400$

Установите таблице ширину в 500px , а высоту в 300px . Сделайте ячейки td жирными и по центру, а ячейки th — нежирными.

font-weight

Устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов.

Краткая информация

Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Анимируется Да

Синтаксис

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold — жирное начертание и normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

Вот как числовые значения влияют на насыщенность шрифта.

  • 100 — тонкое начертание;
  • 200 — сверхсветлое;
  • 300 — светлое;
  • 400 — нормальное (аналогично normal );
  • 500 — среднее;
  • 600 — полужирное;
  • 700 — жирное (аналогично bold );
  • 800 — сверхжирное;
  • 900 — тяжёлое.

Учтите, что не все шрифты поддерживают этот набор. Если указанное значение не поддерживается, то браузер приведёт шрифт к ближайшей насыщенности. К примеру, если вы указали 900 и оно не может быть показано, то браузер в действительности применит значение 700 как ближайшее, которое работает корректно.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

100 300 400 500 700 900

@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900); div < font-family: Roboto, sans-serif; font-weight: >; >

Пример

font-weight

Мелодический голос персонажа

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

Результат данного примера показан на рис. 1.

Применение свойства font-weight

Рис. 1. Применение свойства font-weight

Объектная модель

Объект.style.fontWeight

Спецификация

Спецификация Статус
CSS Fonts Module Level 3 Возможная рекомендация
CSS Transitions Рабочий проект
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

3.5 12 2 3.5 1.3 1

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

  • Насыщенность
  • Свойства шрифта в CSS

Как сделать жирный шрифт в css

Для того чтобы шрифт стал жирным, в CSS есть свойство font-weight. Значение которые принимает свойство могут быть от 100 до 900 с шагом 100 или текстовые — bold|bolder|lighter|normal. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

 Этот текст будет жирным 
p  font-weight: 700; > 

Как убрать жирность у заголовков?

В примере 1 показано, как установить нормальное начертание для заголовков.

Пример 1. Использование font-weight

Заголовки

Сепульки

Важный элемент цивилизации ардритов с планеты Энтеропия.

Сепулькарии

Устройства для сепуления.

Сепуление

Занятие ардритов с планеты Энтеропия.

Результат данного примера показан на рис. 1.

Изменение начертания заголовков

Рис. 1. Изменение начертания заголовков

См. также

  • font-weight
  • Насыщенность
  • Свойства шрифта в CSS

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *