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

22.04.2023 Facebook Twitter LinkedIn Google+ Разное

font-weight — жирный текст | CSS справочник

Поддержка браузерами

12.0+ 4.0+ 1.0+ 2.0+ 3.5+ 1.3+

Описание

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

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

Для свойства font-weight предусмотрены также два относительных значения: bolder и lighter

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

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

Значение по умолчанию: normal
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object.style.fontWeight=»900″

Синтаксис

font-weight: normal|bold|bolder|lighter|число|inherit;

Значения свойства

Значение Описание
normal Определяет стандартное написание символов.
bold Задает жирное начертание символов в тексте.
bolder Тоже самое, что и bold.
lighter тоже самое, что и normal.
100
200
300
400
500
600
700
800
900		 Определяет толщину шрифта по заданному значению, от 0 до 500 — стандартное начертание шрифта, от 600 до 900 — жирное начертание.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

font-weight:

normal

bold

bolder

lighter

100

200

300

400

500

600

700

800

900

Следите за изменением шрифта.

div {
font-weight: normal;
}

html — Сделать жирным одно слово в предложении через CSS

Вопрос задан

Изменён 7 лет 2 месяца назад

Просмотрен 7k раз

Чтобы выделить одно слово из предложения жирным шрифтом средствами HTML нужно использовать тэг <b>Word</b> или <strong>Word</strong>

. Но, все говорят, что нужно оформление полностью делать в CSS. За жирность в CSS отвечает font-weight:. Я пробовал заключать слово в <div></div>, но он переносит текст за измененным словом на новую строку. Как можно решить проблему?

  • html
  • css

2

Поместить его в тег span:

span. bold {
  font-weight: bold;
}
Привет, <span>мир</span>!

Иногда семантика неотделима от оформления — в таком случае просто используйте <b> или <strong>.

Если же оформление как-то связано с семантикой, то жирность можно «навесить» на любой семантический тэг. К примеру, на <abbr> если вам надо выделять жирным аббревиатуры. Или на

<kbd> если вам нужно выделить сочетание клавиш.

Универсальным инлайновым тэгом является <span>. Но использовать его желательно только вместе с уточнением в виде класса:

<span>foo</span>
span.selected-word {
  font-weight: bold;
}

Ну и по поводу <div>. Этот тэг использовать также можно, если задать ему стиль display: inline. Но я бы не рекомендовал так делать, поскольку семантика тут точно нарушится (div — это раздел в тексте, а никак не слово).

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Введение в толщину шрифта HTML/CSS

Назад Введение в толщину шрифта HTML/CSS

В этом вводном руководстве по толщине шрифта HTML/CSS мы рассмотрим несколько простых в использовании творческих приложений для дальнейшего улучшения текста на вашем веб-страница.

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

Если вы хотите попробовать это сами, скопируйте код и вставьте его в текстовый редактор, например Блокнот или Блокнот++. Мы сделаем толщину шрифта «жирным».

Как сделать текст жирным в CSS 0002 /* Стили */

p {
    цвет: красный;
    вес шрифта: полужирный;
    шрифт: 18px Arial, Helvetica, без засечек;
}

стиль >
head >

< body >

< p >Udacity — это место, где вы можете узнать о шрифте10 p 900

body >
html >

Взаимодействие этого кода HTML и CSS показано на следующем рисунке:

Результат на вашей веб-странице такой. Обратите внимание на ЖИРНЫЙ текст.

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

Что нужно знать об использовании числовых значений

Хотя на самом деле существуют следующие числовые значения, которые можно использовать для определения «жирности» отображаемого текста: 100, 200, 300, 400, 500, 600, 700 , 800 и 900, фактический результат будет определяться тем, какой шрифт вы используете в своем CSS.

Не каждый веб-шрифт или «семейство шрифтов» изначально создавался с множеством смелых вариаций. Большинство семейств шрифтов на самом деле имеют только несколько доступных весов. Это означает, что когда указан вес, для которого не существует грани, будет использоваться грань с ближайшим весом.

Числовые значения следующие:

  • 100 – Тонкий
  • 200 – Сверхлегкий (Сверхлегкий)
  • 300 – Светлый
  • 400 – Обычный
  • 500 – Средний
  • 600 – Полужирный (полужирный)
  • 700 – Жирный
  • 800 – Очень жирный (Ультра полужирный) 90 90 – 2 (Ультра 80 черный) 90 тяжелый)

Вот несколько примеров различных значений толщины шрифта:

Примечание: Мы будем использовать семейство шрифтов : Helvetica, Arial, sans-serif; для этой демонстрации.

Стиль CSS Веб-вывод
вес шрифта: полужирный ;
вес шрифта: обычный ;
насыщенность шрифта: 200 ;(светлее, чем обычно)
насыщенность шрифта: 400 50 ;(то же, что и «обычный» 900 19 );9000 060
вес шрифта: 700 ;(то же, что и «полужирный»)
font-weight: 900 ;(это максимум)

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

Сценарии вариантов использования

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

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

Например:

2 2 Веб-результат использования численный вес шрифта 100 будет выглядеть так:

Теперь, если вы хотите подчеркнуть смысл вашего сообщения, увеличьте вес шрифта, указав большее число.

Например:


< html >
< head >

< style type>=900s 0s type=900s 03 Стили */

p {
    цвет: серый;
    вес шрифта: 100;
    размер шрифта: 18 пикселей;
    семейство шрифтов: Arial, Helvetica, без засечек;
}

стиль >
головка >

< корпус >

< p >Udacity — это место, где вы можете узнать о весе шрифта p >

body >
html >

< html >
< head >

< style type=text/css>

/* Styles */

p {
;    
    вес шрифта: 900;
    размер шрифта: 18 пикселей;
    семейство шрифтов: Arial, Helvetica, без засечек;
}

style >
head >

< body >

< p >Udacity — это место, где вы можете узнать о толщине шрифта p >

body >
html >

Веб-результат использования числового шрифта 090 будет выглядеть следующим образом: 30 90 90 18 900

В мире при создании веб-страниц разные браузеры иногда могут давать разные результаты.

Давайте проверим это. Для примера мы будем использовать следующий код:




Udacity — это место, где вы можете узнать о толщине шрифта


909015 Google Chrome 900

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

Итог:  (Куда дальше?)

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

Запишитесь на нашу программу «Введение в программирование Nanodegree» уже сегодня!

Начать обучение

[et_bloom_locked optin_id=”optin_4″]

[/et_bloom_locked]

Как выделить текст жирным шрифтом в CSS

Жирный шрифт сделает элементы толстыми или сделает их более четкими. Жирный текст — это текст, который кажется толще, чем простой текст. Мы можем сделать наш текст полужирным, применив свойство CSS «font-weight» и установив для него значение «полужирный». Мы также можем установить некоторые числовые значения или ключевое слово «жирнее» для этого свойства. В этом свойстве «font-weight» мы задаем толщину текста, который будет отображаться на экране вывода. Мы также можем выделить наш текст в HTML жирным шрифтом, используя различные теги. Но здесь мы обсудим свойство CSS, которое используется для применения эффекта полужирного шрифта к тексту. Мы подробно рассмотрим этот полужирный текст в этом уроке. Мы также сделаем некоторые коды, в которых мы будем выделять текст жирным шрифтом, установив числовые значения в свойстве, а также используя ключевые слова.

Пример №1:

Нам нужно несколько элементов, чтобы применить свойство «шрифт-вес». В результате мы начинаем с создания некоторых элементов HTML. Мы должны сначала открыть новый файл, чтобы создать файл HTML, выбрав HTML в качестве языка. Программное обеспечение, которое мы будем использовать в этом руководстве, — это Visual Studio Code. В этом файле мы начнем писать код. Дополнительно вводим «!» а затем нажмите «Ввод», чтобы получить основные теги HTML, которые необходимы для всех кодов HTML.

После всего этого нам нужно создать тело, куда мы добавим несколько абзацев под заголовком. Мы даем каждому абзацу уникальное имя, чтобы мы могли использовать его, когда применяем к этим абзацам атрибут «font-weight». У нас тут три абзаца. Теперь мы применим свойство «font-weight» к этим абзацам в коде CSS. Мы должны связать оба файла, HTML и файл CSS внутри заголовка, используя тег «ссылка».

Сначала мы вводим имя абзаца «p.p1», а затем используем свойство «начертание шрифта». Это свойство используется для установки толщины текста. Здесь мы устанавливаем его на «нормальный», который также является значением по умолчанию. «Размер шрифта» для первого абзаца — «20 пикселей». После этого у нас есть второй абзац с именем «p2», и для его «шрифта» установлено значение «жирный». Это ключевое слово «полужирный» используется для того, чтобы сделать текст абзаца толще, чем простой текст, а также установить его размер «20 пикселей». Теперь для «p3» мы снова используем свойство «font-weight». На этот раз мы устанавливаем числовое значение для установки толщины третьего абзаца и делаем его «жирным». Здесь мы используем «900» для этого свойства «font-weight». Таким образом, текст абзаца будет выделен жирным шрифтом, а размер шрифта будет таким же, как и в предыдущих абзацах.

Вот вывод ниже, у нас есть три абзаца в выводе, и первый абзац простой, потому что мы установили его значение как обычное. Второй абзац толще первого, что означает, что этот абзац выделен жирным шрифтом. Кроме того, последний абзац выделен жирным шрифтом, но для третьего абзаца мы устанавливаем числовое значение в свойстве «font-weight».

Пример № 2:

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

Мы используем «цвет» для заголовка как «бордовый» и устанавливаем «размер шрифта» для всего «тела» на «22px». Для «par1» мы устанавливаем «начертание шрифта» на «нормальный» и «красный» в качестве «цвета» этого «par1». Для «par2» мы устанавливаем значение «font-weight» как «600», а «зеленый» цвет здесь для «par2». Значение «шрифта» для «par3» было установлено на «700», и здесь используется «синий» цвет. Теперь мы снова используем свойство «font-weight» для следующего абзаца «par4» и устанавливаем его на «800», а его «цвет» — «оранжевый». «Набор шрифта» «par5» установлен как «900», а «цвет» для «par5» — «фиолетовый». После этого мы устанавливаем ключевое слово «полужирный» для значения «шрифта» для «par6», а также определяем его «цвет» на «розовый». Теперь у нас есть последний абзац «par7», и мы установили для него ключевое слово «жирнее». «Цвет» «par7» — «пурпурный».

Вы можете увидеть несколько абзацев с разными значениями свойства «начертание шрифта». Первый абзац выглядит нормально, поскольку мы устанавливаем его значение «нормальный». Остальные абзацы выделены полужирным шрифтом, потому что мы устанавливаем толщину этих абзацев в коде CSS, используя свойство «font-weight».

Пример № 3:

У нас есть два абзаца в этом коде, и мы применим свойство «начертание шрифта» к одному абзацу и покажем вам разницу между полужирным текстом и простым текстом.

Во-первых, мы собираемся стилизовать тело, используя два свойства. Свойство «font-size» устанавливает размер текста в «20 пикселей», а затем выравнивает все элементы тела по «центру», используя свойство «text-align». Мы также стилизовали заголовок, чтобы сделать его более привлекательным, используя «бордовый» для «цвета» «h2». Мы установили «алжирский» как «семейство шрифтов» и «подчеркнули» «h2», используя свойство «text-decoration». Для «h3» мы устанавливаем «зеленый» цвет, а «семейство шрифтов» — «Times New Roman». Теперь мы собираемся использовать свойство «font-weight» для обоих абзацев. Для «para1» его значение установлено как «нормальное». Но для «para2» мы просто используем ключевое слово в качестве его значения и устанавливаем для него значение «жирный», чтобы сделать текст толстым.

Вы можете легко заметить разницу между обоими абзацами. Первый абзац — обычный абзац, но второй абзац здесь выделен жирным шрифтом. Размер шрифта обоих абзацев одинаков, но вы можете видеть, что второй абзац выделен жирным шрифтом.

Пример № 4:

У нас есть два разных заголовка и четыре разных класса div с разными именами для каждого div. Мы собираемся использовать свойство «font-weight» для этих элементов div.

Во-первых, мы будем использовать эти два параметра для стилизации тела. Атрибут «font-size» регулирует размер текста до «21px». Свойство text-align «центрирует» все компоненты тела, как мы его установили. «Семейство шрифтов» для всех элементов текста — «Times New Roman». Мы используем «фиолетовый» в качестве «цвета» «h2», определяем «семейство шрифтов» как «алжирский» и дополнительно стилизуем заголовок, установив для атрибута «text-decoration» значение «подчеркнуть» «h2». Мы выбрали оранжевый цвет для «h3» и «Calibri» в качестве семейства шрифтов. Мы не применяем никаких свойств для «div1» и «div2», мы устанавливаем «900» числовое значение для значения «шрифта». У нас есть «div3» и «bold», используемые для «начертания шрифта», а «div4», «начертание шрифта» установлено как «жирнее».

Первый абзац «div1» простой, и мы не устанавливали никакого значения «начертания шрифта» для этого div1, поэтому для «div1» здесь установлено значение по умолчанию. Для остальных div мы устанавливаем значение параметра «font-weight» и делаем текст этих div «жирным» или «толстым». Мы также упоминаем «шрифт» всех div в выводе. div2 отображается со значением веса шрифта «9».00», следующий div3 появляется здесь как «полужирное» значение для свойства «font-weight» и «жирнее» для последнего div3.

Заключение

Вы узнали, как использовать CSS-свойство font-weight в ходе этого руководства. В этом уроке мы рассмотрели свойство CSS «font-weight» и объяснили, что оно делает, почему мы его используем, как его использовать и какие результаты оно дает.

Comments
Leave Comment

Тип браузера Выход пробы
015
FireFox
Microsoft Edge
Internet Explorer