Как печатать жирным шрифтом

Как печатать жирным шрифтом

Жирный шрифт через свойство CSS font-weight

В CSS есть свойство font-weight, которое отвечает за толщину написание букв.

Синтаксис CSS font-weight

font-weight: bold|bolder|lighter|normal|100..900;

Где

  • bold — жирное значение шрифта (аналог 700)
  • normal (по умолчанию) — нормальное значение шрифта (400)
  • bolder/lighter — шрифт должен быть больше/меньше, чем у родителя
  • inherit — принять значение предка (родителя)

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

Например:

<html> <head> <style> .bold{ font-weight: bold; } </style> </head> <body> <div class=»weight»>Текст со свойством font-weight: bold</div> </body> </html>

Преобразуется на странице в

Текст со свойством font-weight: bold

• Подробное описание свойства CSS border
• Подчеркнутый текст через теги html и свойства CSS
• Курсивный текст через теги html и свойства CSS
• Свойство CSS background
• Фреймы html
• Декларация !important
• Свойство CSS display
• Свойство CSS transform
• Свойство CSS transition
• Зачеркнутый текст html

Сегодняшней публикацией начинаю цикл статей про жирные шрифты. Изначально думал разместить все нюансы и вопросы по теме в одном месте, но информации оказалось слишком много. Лучше воспринимать ее постепенно. Поэтому перед тем, как перейти к разным обзорам шрифтов для создания фотошоп иллюстраций рассмотрю вопросы, связанные с версткой. Подборки фонтов найдете тут: интересные жирные, разные bold и русские толстые шрифты.

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

Жирный текст на HTML

Для выделения определенного текста жирным используются специальные HTML теги — <b> и <strong>. Например следующий код:

<p>Обычный текст.</p> <p><b>Жирный текст</b>.</p> <p><strong>Жирный текст strong</strong>.</p>

На выходе дает такую картинку:

Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег <b> задает простое стилистическое выделение слова жирным шрифтом, тогда как <strong> добавляет при этом некое семантическое «усиленное» (важное) значение. То есть последняя строка — это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно <strong>.

Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:

<p style=»font-weight:bold»>Пример жирного текста.</p> <p>Пример текста с <span style=»font-weight:bold»>жирным</span> словом.</p>

На сайте это отображается так:

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

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

Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:

  • bold (жирный) — 700 по умолчанию;
  • normal (обычный) — 400 по умолчанию.

Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.

Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:

<p>Обычный текст с <span class=»my-bold-font»>жирным выделением</span> по центру.</p>

Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами по типу подчеркивания текста и т.п.:

. my-bold-font { color: black; font-weight: 700; }

Либо можно написать:

. my-bold-font { color: black; font-weight: bold; }

Разницы нет никакой. Кстати, если говорить о HTML теге <strong>, то для него по умолчанию прописан такой стиль:

strong { font-weight: bold; }

Тут хотелось отметить один небольшой нюанс, который мне рассказали на курсах верстки — если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее «понятное название». Например, в примере выше стиль class=»my-bold-font» выглядит логичнее чем class=»new-font», т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.

В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.

Теги и атрибуты при роботе со шрифтами html

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

Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами.

Рассмотрим теги, которые используются для работы со шрифтами в html и их атрибуты. Основным из них является тег <font>. С помощью значений его атрибутов можно задать несколько характеристик шрифта:

  • color – устанавливает цвет текста;
  • size – размер шрифта в условных единицах.

Поддерживается положительное значение атрибута от 1 до 7.

  • face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега <font>. Поддерживается сразу несколько значений перечисленных через запятую.

Пример:

<p> <font size=»7″ color=»red» face=»Arial»>Форматируется только тот текст, который расположен между частями парного тега font.</font> Остальной текст отображается стандартным шрифтом, установленным по умолчанию. </p>
Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:

  • <strong> — задает в html жирный шрифт. Тег <b> по действию аналогичный предыдущему;
  • <big> — размер больше установленного по умолчанию;
  • <small> — меньший размер шрифта;
  • <em> — наклонный текст (курсив). Аналогичный ему тег <i>;
  • <ins> — текст с подчеркиванием;
  • <del> — зачеркнутый;
  • <sub> — отображение текста только в нижнем регистре;
  • <sup> — в верхнем регистре.

Пример:

<p>Обычный текст</p> <p><strong>Жирный текст</strong></p> <p><b>Жирный текст</b></p> <p><big>Больше обычного</big></p> <p><small>Меньше обычного</small></p> <p><em>Курсив</em></p> <p><i>Курсив</i></p> <p><ins>С подчеркиванием</ins></p> <p><del>Зачеркнутый</del></p>

Возможности атрибута style

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

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя.

Синтаксис написания:

font-family: имя шрифта ]

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Размер шрифта можно также задать:

  • В пикселях;
  • В абсолютном значении (xx-small, x-small, small, medium, large);
  • В процентах;
  • В пунктах (pt).

Пример:

<p style=»font-size:7″> font-size:7</p> <p style=»font-size:24px»> font-size:24px</p> <p style=»font-size:x-large»> font-size: x-large</p> <p style=»font-size:200%»> font-size: 200%</p> <p style=»font-size:24pt»> font-size:24pt</p>
3) font-style – устанавливает стиль написания шрифта. Синтаксис: font-style: normal | italic | oblique | inherit

Значения:

  • normal –нормальное написание;
  • italic – курсив;
  • oblique – шрифт с наклоном вправо;
  • inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:

<p style=»font-style:inherit»>font-style:inherit</p> <p style=»font-style:italic»>font-style:italic</p> <p style=»font-style:normal»>font-style:normal</p> <p style=»font-style:oblique»>font-style:oblique</p>
4) font-variant – переводит все прописные буквы в заглавные. Синтаксис: font-variant: normal | small-caps | inherit

Пример того, как изменить шрифт в html этим свойством:

<p style=»font-variant:inherit»>font-variant:inherit</p> <p style=»font-variant:normal»>font-variant:normal</p> <p style=»font-variant:small-caps»>font-variant:small-caps</p>

5) font-weight – позволяет установить толщину написание текста (насыщенность). Синтаксис: font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значения:

  • bold – устанавливает полужирный шрифт html;
  • bolder – жирнее относительно normal;
  • lighter –менее насыщенное относительно normal;
  • normal – нормальное написание;
  • 100-900 – задается толщина шрифта в числовом эквиваленте.

Пример:

<p style=»font-weight:bold»>font-weight:bold</p> <p style=»font-weight:bolder»>font-weight:bolder</p> <p style=»font-weight:lighter»>font-weight:lighter</p> <p style=»font-weight:normal»>font-weight:normal</p> <p style=»font-weight:900″>font-weight:900</p> <p style=»font-weight:100″>font-weight:100</p>

Свойство font и цвет шрифта html

Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font:

font: font-size font-family | inherit

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

  • caption – для кнопок;
  • icon – для иконок;
  • menu – меню;
  • message-box –для диалоговых окон;
  • small-caption – для небольших элементов управления;
  • status-bar – шрифт строки состояния.

Пример:

<p style=»font:icon»>font:icon</p> <p style=»font:caption»>font:caption</p> <p style=»font:menu»>font:menu</p> <p style=»font:message-box»>font:message-box</p> <p style=»font:small-caption»>small-caption</p> <p style=»font:status-bar»>font:status-bar</p> <p style=»font:italic 50px bold «Times New Roman», Times, serif»>font:italic 50px bold «Times New Roman», Times, serif</p>
Для того чтобы задать цвет шрифта в html можно использовать свойство color. Оно позволяет устанавливать цвет, как с помощью ключевого слова, так и в формате rgb. А также в виде шестнадцатеричного кода.

Пример:

<p style=»color:#00FF99″>color:#00FF99</p> <p style=»color:blue»>color:blue</p> <p style=»color:rgb(100,50,180)»>color:rgb(0, 255, 153)</p>

Русскоязычные шрифты и их поддержка

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

  • Arial Black;
  • Arial;
  • Comic Sans MS;
  • Courier New;
  • Georgia;
  • Lucida Console;
  • Жирный текст при помощи CSS

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

    <!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Жирный текст с помощью CSS — «Нубекс»</title> <style> .nubex1 { font-weight: bold; } .nubex2 { font-weight: bolder; } .nubex3 { font-weight: 600; } </style> </head> <body> <center> <p>Наши сайты — это, действительно, <span class=»nubex1″>огромный шаг</span> в веб-разработке.</p> <p>Мы делаем по-настоящему <span class=»nubex2″>качественные</span> сайты.</p> <p>Доверьтесь нам, и мы вас <span class=»nubex3»>не подведем</span>.</p> </center> </body> </html>

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

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


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

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