Жирный курсив шрифт. Как сделать жирный шрифт в HTML

Рассмотрим все способы как можно сделать жирный шрифт через html и CSS. Существует два варианта:

  • Через html тег и
  • Через свойство CSS font-weight

Жирный шрифт через html тег и

Весь текст заключенный в html теги и будет жирным. Первый тег состоящий из необычной буквы "b" произошло в сокращение от английского слова "bold".

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

Обычный шрифт. Жирный шрифт через тег b

Обычный текст.

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

Обычный шрифт. Жирный шрифт через тег b

Обычный текст. Жирный текст через тег strong

Жирный шрифт через свойство 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 для придания шрифту "толщины".

Например:

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

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

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

Жирное начертание шрифта Сильное выделение текста

Курсивное начертание

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

Курсивное начертание шрифта Выделение текста

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

В примере 7.5 показано использование тегов и для оформления текстов.

Пример 7.5. Теги и

Оформление текста

А где же печенье и самогоноваренье?! - воскликнул Мальчиш-плохиш.

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

или изучаем теги, форматирующие HTML текст

Вашему вниманию представлен один из ключевых и самых простых уроков самоучителя.

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

Смотрите ниже теги, форматирующие HTML текст :

  • Теги → жирный HTML текст (жирный шрифт).
  • Теги → жирный HTML текст (жирный шрифт).
  • Теги → моноширинный HTML текст (моноширинный шрифт).
  • Теги → моноширинный HTML текст (моноширинный шрифт).
  • Теги → моноширинный HTML текст (моноширинный шрифт).
  • Теги HTML текст , размер больше обычного (крупный шрифт).
  • Теги HTML текст , размер меньше обычного (мелкий шрифт).
  • Теги → наклонный HTML текст (наклонный шрифт).
  • Теги → наклонный HTML текст (наклонный шрифт).
  • Теги → наклонный HTML текст (наклонный шрифт).
  • Теги → подчеркнутый HTML текст (подчеркнутый шрифт).
  • Теги → зачеркнутый HTML текст (зачеркнутый шрифт).
  • Теги HTML текст (шрифт) в нижнем индексе.
  • Теги HTML текст (шрифт) в верхнем индексе.

HTML форматирование текста: зачеркнутый, подчеркнутый текст

Результат: ... моноширинный шрифт

Результат: ... размер шрифта больше обычного

Результат: ... наклонный шрифт

Результат: зачеркнутый текст (зачеркнутый шрифт)

Результат: верхний индекс

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

Описание

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

Синтаксис

font-style: normal | italic | oblique | inherit

Значения

normal Обычное начертание текста. italic Курсивное начертание. oblique Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

font-style

Duis te feugifacilisi

Lorem ipsum dolor sit amet, 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.

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

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

document.getElementById("elementID ").style.fontStyle

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Браузеры текст со значением oblique всегда отображают как курсив (italic ).

Похожие публикации