Как сделать слова жирным шрифтом
Жирный текст с помощью HTML и CSS
Сегодняшней публикацией начинаю цикл статей про жирные шрифты. Изначально думал разместить все нюансы и вопросы по теме в одном месте, но информации оказалось слишком много. Лучше воспринимать ее постепенно. Поэтому перед тем, как перейти к разным обзорам шрифтов для создания фотошоп иллюстраций рассмотрю вопросы, связанные с версткой. Подборки фонтов найдете тут: интересные жирные, разные bold и русские толстые шрифты.
Сегодня расскажу как сделать слова жирным шрифтом на сайте с помощью HTML и CSS. Такое оформление используется когда вам нужно выделить определенную информацию на странице. Причем речь идет не только о заголовках, но и о простых словах, фразах в тексте. Реализовывается это достаточно просто.
Жирный текст на HTML
Для выделения определенного текста жирным используются специальные HTML теги — и . Например следующий код:
Жирный текст strong.
На выходе дает такую картинку:
Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег задает простое стилистическое выделение слова жирным шрифтом, тогда как добавляет при этом некое семантическое «усиленное» (важное) значение. То есть последняя строка — это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно .
Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:
Пример жирного текста.
Пример текста с жирным словом.
На сайте это отображается так:
Не смотря на то, что код жирного текста для HTML работает корректно, так делать не следует. Все стили оформления должны быть вынесены в CSS файл. Поэтому в примере выше вы должны были для тегов
и указать соответствующий класс, а затем прописать его оформление в таблице стилей. Такие вот правила оформления кода. Поэтому для жирного шрифта в HTML используйте тег .
Жирный текст на CSS
Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:
Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.
Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:
Обычный текст с жирным выделением по центру.
Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами по типу подчеркивания текста и т.п.:
Либо можно написать:
Разницы нет никакой. Кстати, если говорить о HTML теге , то для него по умолчанию прописан такой стиль:
Тут хотелось отметить один небольшой нюанс, который мне рассказали на курсах верстки — если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее «понятное название». Например, в примере выше стиль выглядит логичнее чем т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.
В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.
Интересно продолжение цикла статей про жирные шрифты — что еще будет? Жду 🙂
kpp68, завтра постараюсь опубликовать новый пост.
Всегда можно найти что-то новое и полезное, даже если уже немного и разбираешься во всем этом. Спасибо!
devarts, комментарии «порезали» кавычки — проверьте все ли нормально в одобренном коде?
Благодарю. Обязательно применю у себя на сайте. Что лучше классы не знал. Профессиональный подход.
Жирный, курсивный, зачеркнутый шрифт в WhatsApp
Решив отправить сообщение через Ватсап, не все знают как расставить акценты и привлечь внимание к определенной фразе. Используя жирный шрифт в WhatsApp, можно акцентировать внимание на отдельных моментах, добавить эмоциональности, информативности отправляемому сообщению. Однако не все знают, как это сделать. Предлагаем разобраться, как сделать жирный шрифт при написании всего сообщения или только его части.
Как написать текст жирным
Последовательность действий может существенно отличаться. Все зависит от того, какой версией мессенджера пользуется владелец телефона. Для Android порядок действий будет одним, для iOS или Windows – другим. Однако есть и универсальный способ, который можно использовать на всех трех системах. С ним стоит познакомиться в первую очередь.
Первый способ: универсальный
Разбираясь, как писать жирным шрифтом при работе телефона на определенной операционной системе, стоит в первую очередь рассмотреть данный вариант. Он предполагает использование специального символа. Чтобы писать жирным, достаточно поставить «*», написать сам текст, а затем опять поставить «*».
Делается это в следующей последовательности:
При использовании мобильной версии, работающей на iOS или Андроид, требуемый эффект будет достигнут сразу после завершения фразы. С Виндовс ситуация несколько иная. Возможность форматирования фраз до отправки сообщения здесь не предусмотрена. Однако после нажатия соответствующей клавиши, удастся правильно расставить акценты.
Необязательно сразу выделять конкретную фразу жирным шрифтом. При необходимости можно набрать весь текст, а затем вставить звездочки в нужные места и тем самым выполнить форматирование текста.
Второй способ: контекстное меню
Чтобы воспользоваться данным способом, надо набрать текст, выделить, а после появления контекстного меню выбрать нужный формат. В телефоне на iOS следует прикоснуться к стрелочке, направленной вправо. Это позволит открыть пункт «B I U», в котором и скрывается формат.
Иные способы форматирования
Не всегда жирный шрифт является единственно возможным решением. Форматирование текста в WhatsApp возможно путем зачеркивания, курсива или подчеркивания. При этом достигается желаемый эффект от передачи сообщения. Для достижения желаемого результата можно использовать специальные символы или контекстное меню.
Как писать курсивом
Прежде чем менять шрифт, напишите всю фразу целиком. После этого следует воспользоваться контекстным меню. Как только оно появиться, можно будет поменять стиль написания всей фразы или только ее части.
Вместо контекстного меню можно использовать и специальные символы. Для курсива это нижнее подчеркивание. Чтобы получить красивые буквы, достаточно написать нижнее подчеркивание, вписать текст и опять прописать знак нижнего подчеркивания.
Выглядит это следующим образом:
Как сделать текст зачеркнутым или перечеркнуть отдельные фразы
Зачем зачеркивать текст? Иногда даже в этом возникает необходимость для лучшей подачи информации. Можно зачеркнуть неправильную фразу, а правильную оставить нетронутой.Для получения зачеркиваемого текста достаточно воспользоваться символом тильда. Символ вписывают вначале и в конце текста без каких-либо пробелов и знаков припенания. Фраза сразу получается зачеркнутой. При желании можно подчеркнуть отдельные слова.
Моноширный формат
Чтобы воспользоваться данным форматом, надо найти, где на клавиатуре находятся наклонные ««`» кавычки и также заключить слово в эти символы (кавычек должно быть по три с каждой стороны). Найти его немного сложнее чем другие символы, так как часто он может находиться во вложенном меню первой страницы спецсимволов. Этот спецсимвол позволяет обозначить начало и окончание зоны конфликта. Вместо ускоренного варианта форматирования можно использовать контекстное меню. Изменение формата осуществляется в точном соответствии с содержанием сообщения и целью его отправки.
Заключение
Какой способ форматирования текста является предпочтительным, зависит от содержания отправляемой информации и личности получателя. Одно дело выделить текст при общении с другом и совсем другое с деловым партнерам. Надо не только писать в соответствующем стиле, но и правильно расставлять акценты. Нарушение деловой этики недопустимо. Зная, как выделить конкретную фразу или изменить текст на курсивный, несложно добиться желаемого эффекта при минимальных усилиях, также можно использовать любое их сочетание вместе, эксперементируйте, но не забывайте, что между спецсимволом и словом не должно быть пробела, иначе ничего не выйдет.
Теперь вы в курсе того, как использовать разные типы форматирования разными способами, вы можете выбрать любой вариант, который вам удобен, первый более быстрый, хоть и требует набора дополнительных символов, второй практичнее.
Видео по теме
Как сделать жирный шрифт в HTML?
В этой статье представлены способы, позволяющие использовать полужирный шрифт в HTML.
Как сделать полужирный шрифт при помощи CSS-свойства font-weight
Давайте взглянем на следующий пример:
С помощью этого свойства также можно указывать плотность текста. К тому же вы сможете определять текст, который не требуется выделять.
Делаем текст полужирным используя тег жирного шрифта в html
Большинство людей, знакомых с языком гипертекста, когда видят жирный шрифт HTML, сразу же вспоминают о теге .
Давайте рассмотрим пример того как выделить текст жирным в HTML при помощи тега :
HTML-тег — самый быстрый способ вывести текст полужирным.
Как сделать текст полужирным — какой метод уместнее?
HTML предлагает несколько способов выделения текста. И у каждого тега конкретное предназначение.
Элемент следует использовать, когда другие элементы выделения не подходят. Если точнее: то элементы от
Комбинируем выделение текста с помощью CSS и HTML
HTML-способы отлично подходят для определения значения выделенного текста, в то время как CSS-стилизация отвечает за внешний вид текста.
Таблицы стилей можно использовать для видоизменения и стилизации таких элементов, как и т. д. Следовательно, нельзя с полной уверенностью сказать, что фрагменты контента, обрамленные тегами , обязательно будут полужирными.
Жирный текст CSS
В HTML жирный текст можно сделать несколькими способами. К ним относятся:
Поговорим о каждом из вариантов выделения текста по порядку.
Жирный текст: тег
Тег b HTML применяется следующим образом:
Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему.
Жирный текст: тег
Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фраз, слов, которые являются ключевыми для данной страницы.
Используется тег strong аналогичным образом:
Вы можете заметить, что внешне применение тегов и совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong.
Жирный текст при помощи CSS
Мы уже отмечали важность тега strong при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью «жирности» шрифта? В таких случаях используется CSS-свойство font-weight. Применяется оно следующим образом:
Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.
Как выделить слова жирным шрифтом
Один из наиболее простых способов выделить в тексте слово или фразу – использовать другое начертание букв. Так можно подчеркнуть слово или фразу, используя жирный шрифт. HTML-разметка страницы с легкостью позволяет выделять слова с помощью различного начертания – курсивного, подчеркнутого, жирного.
Жирный шрифт как способ выделить главное
Другие варианты выделения
Итак, мы выяснили, что можно выделить текст с помощью другого начертания. Определились, что наиболее просто и в то же время эффективно использовать жирный шрифт HTML. Теперь поговорим о других вариантах выделения.
При этом, как и ранее, нужный вам текст должен находиться между открывающим и закрывающим тэгом. Как видите, нет ничего сложного, главное – запомнить данные коды или записать их.
Использование нескольких шрифтов
Если вы хотите сделать текст более выразительным, вы можете использовать не только жирный шрифт. HTML-разметка позволяет одновременно выделять слово с помощью нескольких начертаний. Так, можно одновременно сделать слово жирным, перечеркнутым и курсивным.
При этом надо помнить одно – все тэги должны закрываться последовательно. Например, правильная запись может быть такой:
Если же вы закроете тэги в другом порядке, то текст будет выделен неправильно. Пример ошибочной записи:
В таком случае браузер запутается и не поймет, что именно вы от него хотите.
Кстати, тут можно отметить, что три варианта начертания – жирное, подчеркнутое и курсивное – запоминаются довольно легко, если вы владеете горячими клавишами в Word. Там начертание задается с помощью тех же букв-клавиш при зажатом Ctrl.
Как видите, использовать можно не только курсивный или жирный шрифт. HTML-разметка позволяет выделять слова так же легко, как и обычный Word.
Выводы
Для выделения текста широко используются не только разнообразные цвета и оттенки, разный размер и тип шрифта, но и его начертание. Причем именно с помощью другого очертания можно красиво и легко выделить тот или иной фрагмент текста.
Для того чтобы изменить начертание шрифта, следует использовать любой известный вам тег. Жирный шрифт HTML-страницы – наиболее яркий и заметный, а потому используется наиболее часто для выделения.
Примечание: Мы стараемся как можно оперативнее обеспечивать вас актуальными справочными материалами на вашем языке. Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Просим вас уделить пару секунд и сообщить, помогла ли она вам, с помощью кнопок внизу страницы. Для удобства также приводим ссылку на оригинал (на английском языке).
В приложении Word, можно выделить текст полужирным шрифтом тремя способами: с помощью кнопки Полужирный на мини-панель инструментов, используйте кнопку » Полужирный » на вкладке » Главная » или нажмите сочетание клавиш.
Выделение текста полужирным шрифтом
Выделите текст, который вы хотите сделать полужирным и выполните одно из указанных ниже действий.
Наведите указатель мыши на мини-панели инструментов над выделения и нажмите кнопку Полужирный 
.
Нажмите кнопку Полужирный в группе » Шрифт » на вкладке » Главная «.
Введите сочетание клавиш: CTRL + B.
Примечание: Нажмите кнопку Полужирный или введите сочетание клавиш еще раз, чтобы unbold выделенного текста.
В HTML жирный текст можно сделать несколькими способами. К ним относятся:
Поговорим о каждом из вариантов выделения текста по порядку.
Жирный текст: тег
Тег b HTML применяется следующим образом:
Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему.
Жирный текст: тег
Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фрах, слов, которые являются ключевыми для данной страницы.
Используется тег strong аналогичным образом:
Вы можете заметить, что внешне применение тегов и совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong.
Жирный текст при помощи CSS
Мы уже отмечали важность тега strong при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью «жирности» шрифта? В таких случаях используется CSS-свойство font-weight. Применяется оно следующим образом:
Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.