Как изменить толщину текста в css
Перейти к содержимому

Как изменить толщину текста в css

  • автор:

font-weight

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

Синтаксис

Значения

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

HTML5 CSS2.1 IE Cr Op Sa Fx

    font-weight   

Duis te feugifacilisi

, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

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

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

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

[window.]document.getElementById(» elementID «).style.fontWeight

Браузеры

Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold , normal и lighter . На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

Жирный текст CSS

В HTML жирный текст можно сделать несколькими способами. К ним относятся:

Поговорим о каждом из вариантов выделения текста по порядку.

Жирный текст: тег

Тег b HTML применяется следующим образом:

Конструктор сайтов "Нубекс"

Для тега обязательно наличие закрывающего , и ему доступны универсальные атрибуты (такие как class, id, title и т.д.)

Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему.

Жирный текст: тег

Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фраз, слов, которые являются ключевыми для данной страницы.

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

Используется тег strong аналогичным образом:

Конструктор сайтов "Нубекс"

Вы можете заметить, что внешне применение тегов и совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong.

Жирный текст при помощи CSS

Мы уже отмечали важность тега strong при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью «жирности» шрифта? В таких случаях используется CSS-свойство font-weight. Применяется оно следующим образом:

    Жирный текст с помощью CSS - "Нубекс" .nubex1 < font-weight: bold; >.nubex2 < font-weight: bolder; >.nubex3  

Наши сайты - это, действительно, огромный шаг в веб-разработке.

Мы делаем по-настоящему качественные сайты.

Доверьтесь нам, и мы вас не подведем.

Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.

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

Сделать текст насыщенным можно как в разметке, так и в стилях. Рассмотрим, как изменить насыщенность текста с помощью CSS, и узнаем, в чём плюсы этого метода.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Как выделить текст в CSS

Определите, какой участок текста необходимо выделить и используйте CSS-свойство font-weight , которое отвечает за толщину шрифта.

Часто встречающиеся значения:

  • 400 или normal — обычный шрифт, значение по умолчанию;
  • 700 или bold — полужирный шрифт.

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

.boldtext

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

Весь текст, размеченный классом boldtext , станет жирным.

Свойство font-weight может принимать одно из девяти числовых вариантов насыщенности:

  • 100: Thin;
  • 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).

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

Но в большинстве системных шрифтов есть только два варианта толщины: обычный normal (400) и полужирный bold (700). Поэтому остальные значения свойства используются реже.

Кроме числовых значений, у font-weight есть ещё два относительных значения: bolder и lighter . Они делают шрифт жирнее и тоньше, чем текущее или унаследованное значение.

Выделение отдельных предложений и слов

Чтобы выделить отдельные фразы или слова жирным шрифтом, нужные участки текста разметьте отдельными тегами с использованием классов. Например:

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

И затем в стилях пропишите:

.bold

Теперь все слова, обёрнутые в тег span с классом bold , станут жирными.

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

Эффективно и доступно

Что, если весь жирный текст сразу разметить в файле HTML? Для этого же есть специальные теги и .

Теги и используют в особых случаях, при этом важно знать несколько моментов:

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

В каких случаях предпочтительно использовать свойство font-weight :

  • Для совместной работы над проектом. Если кто-то из команды захочет изменить стиль текста, ему не придётся искать и изменять каждый элемент HTML. Нужно будет просто изменить стили шрифтов в CSS.
  • Для обеспечения доступности. Скринридер при чтении сайта учитывает насыщенность шрифта. Скринридер выделяет слова с тегом интонационно, в отличие от простого выделения с помощью . Если чтение с интонацией не нужно, а важно лишь расставить визуальные акценты в тексте, то лучше использовать свойство font-weight .

Ещё по теме

  • Как подключить и оптимизировать нестандартные шрифты
  • Как убрать подчёркивание ссылок
  • Как сделать список без точек в HTML

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Игры с бесконечностью, или зачем нам infinity в CSS

Игры с бесконечностью, или зачем нам infinity в CSS

�� Это перевод статьи Will Boyd из блога CodersBlock. Оригинал: https://codersblock.com/blog/playing-with-infinity-in-css/

В CSS есть константа Infinity. Когда я только узнал об этом, ко мне в голову сразу пришла гора абсурдных идей, как это использовать, среди которых была и пара неплохих.

Ну, мне так кажется.

Кстати, если что, infinity можно использовать только внутри calc() . Ну, поехали!

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • 5 марта 2024

Межстрочное расстояние в CSS. Свойство line-height

Межстрочное расстояние в CSS. Свойство line-height

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Значение line-height можно указывать как в абсолютных единицах (например, px , pt ), так и в относительных ( em , % , без единицы измерения). Рекомендуется использовать относительные единицы, так как они позволяют сохранить масштабируемость и адаптивность текста.

  • line-height: 1.2; — относительное значение, не зависящее от размера шрифта.
  • line-height: 20px; — абсолютное значение, фиксированный размер интерлиньяжа.
  • line-height: 1.5em; — относительное значение, зависящее от размера шрифта элемента.
  • 4 марта 2024

Свойство text-align

Свойство text-align

Свойство text-align в CSS используется для определения горизонтального выравнивания текста внутри элемента.

�� Сегодня вам бесплатно доступны тренажёры по HTML и CSS.

Свойство text-align может принимать несколько значений, включая:

  • left — выравнивает текст по левому краю контейнера.
  • right — выравнивает текст по правому краю контейнера.
  • center — центрирует текст внутри контейнера.
  • justify — выравнивание текста по ширине. Оба края текста (левый и правый) будут выровнены по краям контейнера.

Пример использования свойства text-align :

Этот код выравнивает текст внутри всех параграфов ( ) по центру.

Для практики и улучшения своих навыков работы с text-align и другими свойствами CSS, рекомендуем пройти тренажёр. Он поможет лучше понять, как работает выравнивание текста, и даст возможность попрактиковаться в использовании различных значений свойства text-align .

  • 4 марта 2024

CSS-препроцессоры в 2024. Большой обзор

CSS-препроцессоры в 2024. Большой обзор

Препроцессоры позволяют разработчикам расширить возможности CSS. Например, они добавляют селекторы наследования, вложенные правила, примеси и многие другие.

Одна из важных задач препроцессоров — упростить и ускорить процесс разработки и поддержку стилей в проекте. В обзоре рассмотрим наиболее популярные препроцессоры в 2024 году и расскажем, как выбрать подходящий.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • 29 февраля 2024

Как прятать

Как прятать

Когда display: none , а когда visibility: hidden ? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище. ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.

  • 28 февраля 2024

Новое в 2023 — text-wrap: balance

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

  • 13 ноября 2023

Знакомство с CSS

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • 1 ноября 2023

Увеличение ссылки при наведении

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • 13 октября 2023

WOFF больше не нужен

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

  • IE 11, 10, 9, 8, 7, …
  • Chrome 4–35
  • Edge 12 и 13
  • Safari 3–9.1
  • Firefox 2–38
  • Opera 22 и ниже
  • Android 4.4.4 KitKat и ниже (а это
  • Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

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

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

  • 23 сентября 2023

Трясём пароль с помощью CSS

Трясём пароль с помощью CSS

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вот что получится в итоге:

  • 7 сентября 2023

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

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

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

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

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