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

Leave a Comment / Css / By /

Создание жирного и курсивного шрифта средствами CSS

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

Курсивный шрифт CSS

Оформлять текст курсивом помогает свойство font-style: ;, которому прописывается значение italic, что обозначает «Стиль шрифта — курсивный».

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>

Первый абзац Первый абзац Первый абзац Первый абзац

Второй абзац Второй абзац Второй абзац Второй абзац

Третий абзац Третий абзац Третий абзац Третий абзац

 
Четвертый абзац Четвертый абзац Четвертый абзац

Пятый абзац Пятый абзац Пятый абзац Пятый абзац
</body>
</html>

Задаем свойство для курсивного шрифта.

CSS

.italic{
    font-style: italic;
}

Если Вы создали такие абзацы и задали для них свойство, то у второго абзаца текст стал курсивным. Это мы задали свойство для всего абзаца, а теперь давайте усложним и зададим курсив только для двух слов в четвертом абзаце. Как такое сделать? В HTML уроке мы разбирали тег логического уровня <span>. Данный тег как раз используется для таких ситуаций, когда для какой-то части элемента нужно задать какой-то класс. И так в четвертый абзац встраиваем тег <span> </span> и ему прописываем класс <span class=«italic»></span>

. В результате получаем вот такую запись:

HTML


Первый абзац Первый абзац Первый абзац Первый абзац

Второй абзац Второй абзац Второй абзац Второй абзац

Третий абзац Третий абзац Третий абзац Третий абзац

Четвертый абзац Четвертый абзац Четвертый абзац

Пятый абзац Пятый абзац Пятый абзац Пятый абзац

CSS

.italic{
    font-style: italic;
}

Теперь второй абзац и часть четвертого абзаца отображаются курсивом. В демо это наглядно показано.

Жирный шрифт CSS

Чтобы задать жирный шрифт используется другое свойство, с именем font-weight: ; другими словами его еще называют насыщенностью шрифта. Изначально насыщенность установлена в значение normal то есть насыщенность шрифта нормальная, а задав значение

bold он примет полужирный вид.

CSS

.bold{
    font-weight:bold ;
}

Так же можно задавать значение насыщенности цифрами от 100 до 900 с шагом 100. Значение normal приравнивается цифре 400, а значение bold цифре 700. Значение 900 поддерживается не всеми шрифтами, поэтому задав это значение, Вы можете не заметить отличия от значения 700. Выглядит такое условие следующим образом.

CSS

.bold{
    font-weight:700 ;
}

В html коде поступают точно также: если нужно выделить весь абзац то задаем ему новый класс, если часть текста, то используем тег <span class=«italic»></span>

. Рассмотрим маленький пример:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>

Первый абзац Первый абзац Первый абзац Первый абзац

Второй абзац Второй абзац Второй абзац Второй абзац

Третий абзац Третий абзац Третий абзац Третий абзац

Четвертый абзац Четвертый абзац Четвертый абзац

Пятый абзац Пятый абзац Пятый абзац Пятый абзац
</body>
</html>

CSS

.bold{
    font-weight: bold;
}

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

  • Курсивный шрифт задается: font-style:italic;.
  • Жирный шрифт задается: font-weight:bold;.
  • Для возврата шрифту нормальной насыщенности устанавливается значение: font-weight:normal; или значение font-weight:400;, что в данном случае означает одно и тоже.

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

<<< Предыдущий материал

Следующий материал >>>


Просмотреть демо: Демо

Скачать исходник: Скачать

Как создать жирный и курсивный заголовки в HTML

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

Заголовки

Теги заголовков — это самый простой способ разделить ваш документ. Если вы думаете о своем сайте как о газете, тогда заголовки — это заголовки в газете. Основной заголовок — это h2, а последующие заголовки — от h3 до H6.

Используйте следующие коды для создания HTML.

<h2> Это заголовок 1 </ h2> 
<h3> Это заголовок 2 </ h3> 
<h4> Это заголовок 3 </ h4> 
<h5> Это заголовок 4 </ h5> 
<h5> Это заголовок 5 </ h5> 
<h6> Это заголовок 6 </ h6>

Держите заголовки в логическом порядке — h2 предшествует h3, который предшествует h4, и так далее.

Не беспокойтесь о том, как выглядят заголовки — вы должны использовать CSS для стилизации заголовков, а не использовать заголовки не по порядку. Теги заголовков — это элементы уровня блока , поэтому они ставят для вас разрывы строк. Не помещайте теги абзаца внутри тегов заголовка.

Жирный и Курсив

Есть четыре тега, которые вы можете использовать для жирного и курсива:

  • <strong> и <b> для жирного
  • <em> и <i> для курсива

Неважно, какой вы используете. В то время как некоторые предпочитают <strong> и <em>, многие люди находят <b> для «жирный» и <i> для «курсив» легче запомнить.

Просто окружите свой текст открывающими и закрывающими тегами, чтобы сделать текст  жирным  или  курсивом:

<b> полужирный </ b> 
<i> курсив </ i>

Вы можете вложить эти теги (что означает, что вы можете сделать текст как жирным, так и курсивом), и не имеет значения, какой это внешний или внутренний тег.

Например:

Этот текст выделен жирным шрифтом

<strong> Этот текст выделен жирным шрифтом </ strong>

Этот текст выделен курсивом

<em> Этот текст выделен курсивом </ em>

Этот текст выделен жирным шрифтом и курсивом

<strong> <em> Этот текст выделен жирным шрифтом и курсивом </ em> </ strong>

Почему есть два набора тегов жирным шрифтом и курсивом

В HTML4 теги <b> и <i> считались тегами стиля, которые влияли только на внешний вид текста и ничего не говорили о содержимом тега, и их использование считалось плохой формой. Затем в HTML5 им было дано семантическое значение вне внешнего вида текста.

В HTML5 эти теги используют определенные значения:

  • <b> обозначает текст, который не важнее окружающего текста, но типичным типографским представлением является жирный текст, например ключевые слова в аннотации документа или названия продуктов в обзоре.
  • <i> обозначает текст, который не более важен, чем окружающий текст, но типичным типографским представлением является текст курсивом, такой как название книги, технический термин или фраза на другом языке.
  • <strong> обозначает текст, который имеет большое значение по сравнению с окружающим текстом.
  • <em> обозначает текст, который имеет подчеркнутый удар по сравнению с окружающим текстом.

Курсив в заголовках

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

Создание действительно жирного текста с помощью css

Есть ли способ сделать мой шрифт жирнее, чем в приведенных ниже примерах? Я попытался увеличить вес шрифта с 900 до 1500, но не вижу никакой разницы.

 #шаг-1 раздел {
    вес шрифта: жирнее;
    вес шрифта: 900;
}

0

Используйте text-shadow , чтобы сделать его более жирным.

 
 .действительно жирный {
    текст-тень:
        -1px 0 черный, 0 1px черный, 1px 0 черный, 0 -1px черный,
        -1px -1px черный, 1px 1px черный, -1px 1px черный, 1px -1px черный;
}

См. ДЕМО.

2

Вы можете использовать только один из следующих свойств:

 вес шрифта: нормальный
вес шрифта: полужирный
вес шрифта: светлее
вес шрифта: жирнее
вес шрифта: 100
вес шрифта: 200
вес шрифта: 300
вес шрифта: 400
вес шрифта: 500
вес шрифта: 600
вес шрифта: 700
вес шрифта: 800
вес шрифта: 900
вес шрифта: наследовать

№ размер шрифта: 900 — максимальный. Вы можете использовать другой шрифт.

1

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

могут происходить для font-weight: bold , когда полужирный шрифт недоступен.

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

В частности, для Arial есть Arial Black, но многие браузеры рассматривают его как отдельное семейство шрифтов, а не как тяжелый шрифт семейства Arial. Поэтому лучшие шансы на его получение — объявить семейство шрифтов : Arial Black; вес шрифта: нормальный .

Использование text-shadow с цветом текста или другими приемами никогда не делает шрифт жирнее; это просто создает иллюзию смелости, и типографски это нет-нет.

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как сделать текст жирным в HTML?

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

В этом посте я покажу вам все возможные способы выделения текста жирным шрифтом в HTML.

  1. 1 Полужирный текст HTML – все возможные способы
    1. 1.1 Использование тега
    2. 1.2 Использование тега
    3. 1.3 Жирный текст с использованием свойства CSS font-weight
      1. 1.3.1 Типы веса шрифта в CSS
  2. 2 Заключение

HTML полужирный текст – все возможные способы

Использование тега 

 
Amet consectetur adipisicing elit possimus rerum Differentio incidunt necessitatibus numquam dolor sitamet consectetur unde reiciendis ducimus.
 >

См. вывод ниже.

Жирный текст в абзаце с использованием тега

Использование тега 

 
Amet consectetur adipisicing elit possimus rerum Differentio incidunt necessitatibus numquam dolor sitamet consectetur unde reiciendis ducimus. 
 >

См. вывод ниже. Выделение текста жирным шрифтом в абзаце с использованием тега

Как видите, этот вывод аналогичен предыдущему.

Жирный текст с использованием свойства CSS font-weight

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

 p {
  вес шрифта: полужирный;
  /* ИЛИ */
  вес шрифта: жирнее;
}

Полужирное значение похоже на 700, а более жирный шрифт тяжелее, чем его родитель.

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

 
Amet consectetur adipisicing elit possimus rerum Differentio incidunt necessitatibus numquam dolor sitamet consectetur unde reiciendis ducimus. 


Amet consectetur adipisicing elit possimus rerum Differentio Incidunt necessitatibus numquam dolor sitamet consectetur unde reiciendis ducimus.


Amet consectetur adipisicing elit possimus rerum Differentio Incidunt necessitatibus numquam dolor sitamet consectetur unde reiciendis ducimus.
 
 диапазон {
  вес шрифта: полужирный;
}
/* ИЛИ */
.жирный текст {
  вес шрифта: полужирный;
}
/* ИЛИ */
#жирный шрифт {
  вес шрифта: полужирный;
}

Для приведенных выше HTML и CSS вывод выглядит так, как показано на снимке экрана ниже.

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

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

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

Но все эти значения веса шрифта делятся на две основные категории: относительные и абсолютные.

Относительный вес шрифта: жирнее, светлее и т.д.

Абсолютный вес шрифта: 400, 700, 900 и все числовые значения являются примерами в этой категории.

Если вы не знаете, «Google Fonts» — отличный и простой в использовании ресурс. И это также бесплатно. Вы можете зайти на их веб-сайт и выбрать один или несколько шрифтов вместе с предпочитаемым весом.

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

Заключение

Теперь вы знаете, как сделать текст полужирным в HTML и с помощью CSS. Это возможность выделить определенные части вашего текста.

Шихаб Ул Хак

Можешь звать меня Шихаб. Я веб-разработчик и много работаю с PHP и WordPress.
У меня есть степень магистра, и я оставил свою обычную работу, чтобы полностью посвятить себя области, в которой я люблю работать. Я живу в Бангладеш и помогаю владельцам бизнеса создавать потрясающее присутствие в Интернете.

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

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