Как указать жирность шрифта в css

CSS-свойства для шрифтов

Шрифт в английском языке переводится как font или type. Первый вариант перевода мы будем использовать для различных css-свойств, которые позволяют управлять шрифтами на html-странице, а второй, как правило, обозначает инструмент Текст в Photoshop или в Figma, и формирует такой известный термин, как типографика (typography), т.е. наука о шрифтах.

Рассмотрим шрифтовые свойства в CSS.

Свойство color — цвет шрифта

Свойство color меняет цвет шрифта со стандартного черного на любой заданный вами или на прозрачный ( transparent ).

Цвет текста влияет не только на сам текст, но и на

Наследование свойств. Значение inherit и initial

Должно быть, вы заметили, что в примере есть абзац с текстом родительского элемента, для которого вы можете задать цвет, нажав на одну из ссылок. После этого весь текст примера окрасится в соответствующий цвет. В этом и заключается наследование css-свойств. Если какое-либо свойство назначено для родительского элемента, оно, как правило, касается и вложенных, или дочерних элементов. Для дочерних элементов можно назначить другие значения наследуемых свойств, но в том случае, если вы хотите использовать значение свойства родительского элемента, следует установить значение inherit . Учтите, что использовать его просто так не стоит. Это значение имеет смысл в том случае, если для дочерних элементов назначалось какое-то другое значение, но в какой-то момент нужно вернуться к тому значению, которое было у родителя.

Значение initial возвращает элементу значение по умолчанию, которое установлено настройками браузера или его таблицей стилей.

Свойство font-family — семейство шрифта

Свойство font-family используется для выбора семейства шрифта, т.е. набора символов с определенным названием, которые в операционной системе пользователя представлены одним или несколькими файлами шрифта. Свойство предполагает, что вы можете перечислить через запятую несколько вариантов шрифтов, с помощью которых должен отображаться текст на вашей html-странице. Так как неизвестно, установлен ли указанный вами шрифт на компьютере посетителя вашего сайта, то желательно прописывать несколько вариантов однотипных шрифтов. Браузер будет проверять их наличие в ОС пользователя в той последовательности, в которой вы их указали в свойстве font-family , пока не найдет нужный.

Если в имени шрифта имеются пробелы или символы (например, #, $, %), то оно заключается в кавычки. Это делается для того, чтобы браузер мог понять, где начинается и заканчивается название шрифта. То есть шрифт Times New Roman, состоящий из 3-х слов с пробелами, необходимо указать, как ‘ Times New Roman’. Кавычки могут быть одинарными или двойными, это не меет значения, главное, чтобы они были одинаковыми

Свойство font-family наследуется от родительского элемента, поэтому можно указывать его для body , чтобы определить в качестве основного для текста страницы.

Как указать жирность шрифта в css

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap

Шрифты в CSS. Основы CSS для начинающих. Урок №6

Шрифты в CSS. Основы CSS для начинающих. Урок №6

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

Стиль шрифта в CSS

Свойство «FONT-STYLE»
Если вы захотели поменять стиль шрифта, а именно, сделать текст курсивом или просто наклонным, то воспользуйтесь правилом « font-style ».

  • normal — нормальный шрифт;
  • italic — курсив;
  • oblique — наклонный шрифт.

Стиль шрифта в CSS

Толщина шрифта в CSS

Свойство «FONT-WEIGHT»
Если вы хотите сделать шрифт жирным, используйте правило « font-weight ».

  • normal — нормальная жирность
  • lighter — светлое начертание
  • bold — полужирный
  • bolder– жирный

Толщина шрифта в CSS

Можно указать толщину шрифта и обычными цифрами от 100 до 900.

  • 100 — светлый шрифт,
  • 900 — самый жирный

Толщина шрифта в CSS

Размер шрифта в CSS

Свойство «FONT-SIZE»
Шрифт можно менять по размеру. Для этого используйте правило « font-size ».

Значение задается в « px » и « % ».

Размер шрифта в CSS

Шрифты в CSS

Свойство «FONT-FAMILY»
На каждом компьютере установлены стандартные шрифты, такие как « Times New Roman », « Arial » или « Verdana ». Выбор шрифта зависит от вкуса каждого, но потом он влияет на то, как внешне будет выглядеть сайт.
Чтобы указать шрифт, воспользуйтесь правилом « font-family ».

Можно задавать в правилах несколько шрифтов. Это на тот случай, если у пользователя нет первого шрифта, тогда подключится второй.

Обратите внимание, шрифт « "Times New Roman" » написан в кавычках ( " " ).
В кавычки берутся те шрифты, в которых название состоит из двух и более слов и есть пробел между словами.

Семейство шрифтов
Можно в правило « font-family » прописать и целое семейство шрифтов.
Наверное, вы меня не совсем поняли. Сейчас попробую объяснить.
Существует множество видов шрифтов, которые образуют так называемые семейства.
Существует всего пять семейств шрифтов:

  • sansserif – шрифты без засечек (как Arial).
    Семейство шрифтов
  • serif— семейство шрифтов с засечками (как Times New Roman).
    Семейство шрифтов
  • monospace – моноширинные шрифты, ширина каждого символа в таком семействе одинакова.
    Семейство шрифтов
  • cursive–курсивные шрифты.
    Семейство шрифтов
  • fantasy — художественные и декоративные шрифты.
    Семейство шрифтов

А можно и вот так:

Подключение нестандартных шрифтов в CSS

Свойство «@FONT-FACE»
Бывает такой момент, что вам просто необходимо установить на сайт нестандартный шрифт, то есть, шрифт, который не установлен по умолчанию у пользователя на компьютере.
Правило « @font-face » позволяет нам импортировать внешний файл шрифтов в документ. После импортирования, мы можем использовать нестандартный шрифт как обычный через правило « font-family ».
Залейте любой нестандартный шрифт формата «ttf» в папку вашего сайта рядом с файлом css, это для того, чтобы вы не запутались и правильно написали путь к шрифту. Для примера я возьму нестандартный шрифт с именем « DS-UncialFunnyHand-Medium.ttf» .
Вот пример подключения нестандартного шрифта.

  • font-family:. ;— здесь пишем имя шрифта;
  • src: url(. ); — тут указываем путь к файлу со шрифтом который будет загружаться с сайта.

Вот полный пример с подключением нестандартного шрифта и его использование.

font-weight

CSS свойство font-weight устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.

Синтаксис

Значения

Недоступность заданного значения

Если заданное цифровое значение насыщенности недоступно, для определения толщины отображаемого шрифта используется следующий алгоритм:

  • Если задано значение выше 500 , будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
  • Если задано значение менее 400 , будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
  • Если задано значение 400 , будет применено 500 . Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400 .
  • Если задано значение 500 , будет применено 400 . Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400 .

Это означает, что для шрифтов , которые предоставляют только normal и bold начертания, 100-500 normal , и 600-900 bold .

Значение относительных весов

Когда используется жирнее или светлее, следующая таблица используется для вычисления абсолютного веса элемента:

наследуемое значение жирнее светлее
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

Определение веса имени

Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:

Значение Общее название
100 Тонкий (Волосяной) Thin (Hairline)
200 Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light)
300 Светлый Light
400 Нормальный Normal
500 Средний Medium
600 Полужирный Semi Bold (Demi Bold)
700 Жирный Bold
800 Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold)
900 Чёрный (Густой) Black (Heavy)

Интерполяция

Значения font-weight интерполируются с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путём округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округлёнными в сторону положительной бесконечности .

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

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