B жирный шрифт


Содержание
Илон Маск рекомендует:  Что такое код atof

HTML тег

Элемент (от англ. «bold» ‒ «жирный, полужирный») отображает вложенный в него текст полужирным шрифтом. Допускается одновременное использование данного элемента с другими элементами форматирования текста.

Замечания по использованию

  • В соответствии со спецификацией HTML 5 тег следует использовать в крайнем случае, когда нет другого тега являющегося более уместным. Тэг представляет собой фрагмент текста, который стилистически отличается от обычного текста, без передачи какого-либо особого значения или значимости. Обычно он используется для указания ключевых слов в тексте, или других фрагментов текста, которые необходимо выделить жирным шрифтом.
  • Не следует путать элемент с элементами , или . Тег определяет важность отмеченного текста, ставит некоторый акцент на тексте и элемент представляет собой текст определенной уместности (выделяется по умолчанию желтым цветом). Элемент не передает такую специальную семантическую информацию; используйте его только тогда, когда никакие другие теги не подходят.
  • Точно так же, не отмечайте названия и заголовки с помощью элемента . Для этой цели используйте теги
. Кроме того, используя таблицы стилей можно изменить стиль по умолчанию этих элементов, в результате чего они не обязательно будут отображаются жирным шрифтом.
  • Если нет семантической цели по использованию элемента , используйте CSS свойство «font-weight», чтобы отобразить текст жирным шрифтом.
  • Синтаксис

    Закрывающий тег

    Атрибуты

    Для этого элемента доступны глобальные атрибуты и события.

    Стилизация по умолчанию

    Большинство браузеров отобразит элемент со следующими значениями CSS по умолчанию:

    HTML Жирный и курсив


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

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

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

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

    ТЕГ ОПИСАНИЕ
    Жирный текст. Приписывает текст для выделения важности. Это помогает тематизировать страницу, а также может использоваться для стратегий SEO, а также в заголовках для обозначения наиболее важной части заголовка
    Устанавливает жирное начертание шрифта. Предлагает стилистическое различие по отношению к остальной части контента, не придавая особой важности тексту ( примечание: жирный он или нет, не имеет значения).
    Браузеры отображают такой текст курсивным начертанием. Подобно , он служит для представления текста или предложения, которое имеет большее значение по отнощению к другому тексту.
    Устанавливает курсивное начертание шрифта. Он служит для представления текста, который выражает тон, настроение или что-то, что отличается от остального содержимого, без добавления дополнительных значений или важности.

    В конечном счете, выразительная способность «strong» и «em» улучшена, а также «i» и «b», когда-то освобожденные от определений курсива и жирного шрифта . Что касается стилей, они теперь полностью ограничены CSS.

    Полужирное начертание css – font-weight | htmlbook.ru

    font-weight | htmlbook.ru

    Internet Explorer Chrome Opera Safari Firefox Android iOS
    6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

    Краткая информация

    Версии CSS

    CSS 1 CSS 2 CSS 2.1 CSS 3

    Описание

    Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900
    с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет
    значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое
    установлено по умолчанию) эквивалентно 400, стандартный полужирный текст —
    значению 700.

    Синтаксис

    Значения

    Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

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

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


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

    Браузеры

    Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

    Курсив и жирный шрифт CSS — учебник CSS

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

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

    Управлять жирностью шрифта в CSS можно с помощью значений свойства font-weight :

    bold Полужирный шрифт
    normal Обычный шрифт
    bolder Более жирный шрифт, чем у родителя
    lighter Менее жирный шрифт, чем у родителя
    inherit Наследует значение родителя
    Числовое значение от 100 до 900 От очень тонкого до очень жирного шрифта

    Насыщенность шрифта вы можете регулировать с помощью ключевых слов bold (полужирное), normal (обычное начертание), bolder (более жирное, чем у родителя), lighter (менее жирное, чем у родителя), inherit (такое же, как у родителя), а также используя числовые значения 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 и 900 , настраивая жирность шрифта от самого тонкого до самого плотного.

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

    Курсив в CSS: свойство font-style

    Задать курсивное начертание шрифта можно при помощи значений свойства font-style :

    italic Курсивный шрифт
    oblique Наклонный шрифт
    normal Обычный шрифт
    inherit Наследует значение родителя

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

    Значение normal устанавливает обычный стиль шрифта, а inherit позволяет наследовать стиль родителя.

    Далее в книге: строчные и заглавные буквы с помощью свойства CSS text-transform.

    Как сделать жирный шрифт на HTML и CSS

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


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

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

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

    Жирный текст strong.

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

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

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

    Пример жирного текста.

    Пример текста с жирным словом.

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

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

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

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

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

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

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

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

    Обычный текст с жирным выделением по центру.


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

    . my-bold-font <
    color: black;
    font-weight: 700;
    >

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

    . my-bold-font <
    color: black;
    font-weight: bold;
    >

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

    strong <
    font-weight: bold;
    >

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

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

    bolder» для шрифтов со множеством начертаний / Habr

    Если вы используете шрифт со множеством начертаний, то вам, вероятно, захочется, чтобы теги strong и b не увеличивали жирность шрифта до фиксированного значения font-weight:700 , как это происходит по-умолчанию, а использовали промежуточные значения, рассчитанные исходя из жирности шрифта родительского элемента.
    Ведь не очень красиво, когда в ультратонком шрифте появляются жирные кляксы тегов strong .

    Возьмём для примера Open Sans.

    Open Sans имеет пять начертаний: Light 300, Normal 400, Semi-Bold 600, Bold 700 и Extra-Bold 800.

    Цифры соответствуют значению font-weight .

    Пусть основной текст имеет начертание Light 300, заголовки и цитаты — Normal 400, а промо-блок — Semi-Bold 600:

    Тег strong может встечаться и в основном тексте, и в цитатах, и промо-блоке. Надо это учесть.

    А нам хочется, чтобы у strong и b для основного текста было Normal 400, для цитат и заголовков — Bold 700, а для промо блока — Extra-Bold 800. Это сохранит контраст между жирным и нежирным текстом примерно равным во всех случаях.

    Уверен, многие пробовали использовать strong , но это не принесло ожидаемого результата — текст стал ещё жирнее, чем ожидалось.

    А всё потому, что согласно спецификации, значение bolder ( lighter ) увеличивает (уменьшает) унаследованное значение font-weight до следующего возможного для данного шрифта значения, согласно следующей таблице.


    Шрифт Bold

    Классический жирный шрифт без засечек. Ничего лишнего.

    1. Напиши текст на латинице (Eng) и нажми «Изменить»

    2. Посмотри, что получится. Выдели и скопируй

    В чем секрет красивых шрифтов?

    TextGenerator.ru конвертирует введеный текст в символы Юникода. Мы объединили их в тематические наборы, чтобы вы могли создавать текст с применением красивых шрифтов, которые легко скопировать онлайн.

    Шрифты только на английском языке?

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

    Почему где-то я вижу ☐☐☐ ?

    Если какой-либо из шрифтов или отдельные символы отображаются некорректно, значит ваше устройство или браузер не поддерживают соответствующие символы Юникода. Лучше всего наши шрифты отображаются на последних версиях iOS, Android, а также Windows 10.

    Как я могу помочь проекту?

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

    Обратите внимание:

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

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

    Нам требуется сделать текст жирным! Либо весь текст либо часть должна иметь жирное начертание – давайте разберёмся. Как это делается!

    Первое, что сразу приходит на ум и самое простое, это использование тега «b»

    Вариант №1 Здесь текст Здесь простой текст, а здесь жирный.
    Данный код можно вставлять во внутрь любого текста, который уже имеет свои теги – например абзаца. И тот верхний код, если мы его посмотрим. То внутри абзаца стоит тег «b»

    Здесь простой текст, а здесь жирный.


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

    За жирное начертание текста отвечает свойство шрифта — «font-weight»

    p Напоминаю, что можно использовать такие вещи — здесь свойство шрифта, как на отдельной странице, либо на всем сайте используя файл css либо через «style = «»» в любом месте страницы.

    Имя шрифта, кроме как «bold» = полужирный, может быть «bolder» = Жирный, и цифровой «100–900» = 100 — светлый шрифт, 900 — самый жирный

    Пример использования свойств шрифта для отображения жирного текста.

    Тут есть важное замечание. что не все шрифты поддерживают различные свойства — поэтому -нужно смотреть спецификацию шрифта.

    B — жирный шрифт

    Представить текст выделенным (жирным) шрифтом.

    Типичное представление

    Выделенное (жирным шрифтом). См. общие примечания к отображению разметки.

    Основной синтаксис

    Возможные атрибуты

    Допустимый контекст

    Контейнер текста, т.е. любой элемент, который может содержать элементы текста. Это включает большинство элементов HTML. Элементы текста могут быть вложенными.

    Содержимое

    Элементы текста. Заметим, что не разрешается перевод (прерывание) абзаца.

    Примеры

    Примечания


    Избегайте использования элемента B. Вместо него используйте логическую разметку, например, элементы EM или STRONG для подчеркивания.

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

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

    Жирный текст (или какие-то отдельные его части) часто используется для того, чтобы выделить главную мысль текста или заострить на этом участке внимание пользователя.

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

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

    Для того чтобы придать тексту нужную насыщенность, необходимо воспользоваться свойством «font-weight».

    Пример с отдельным CSS:

    Пример с встроенным CSS в HTML:

    В таком случае мы получаем полужирный стиль текста. Свойство «font-weight» может принимать как числовое значение с шагом 100 (от 100 до 900, где 100 – минимальное, а 900 – максимальное), так и с помощью ключевых слов – bold, bolder, lighter, normal.

    Стандартная жирность текста задается значением 700 или словом bold.

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

    В HTML эти же задачи решаются с помощью тегов b или strong. Пример:

    По степени насыщения оба тега эквивалентны значениям «700» и «bold» из CSS.

    На что здесь стоит обратить внимание? На то, что тег b чаще всего используется просто для выделения всего текста, когда как strong используется для выделения главных слов, например, для ключевых.

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

    Когда вы используете готовый инструмент для создания сайта, некоторые участки текста не подвластны редактированию приведенными ранее способами. Для этого можно воспользоваться jQuery и методом «css»:

    Степень насыщения и возможные ее варианты вы можете найти в первом варианте «Жирный текст на CSS».

    «Font-weight: bolder» для шрифтов со множеством начертаний


    Если вы используете шрифт со множеством начертаний, то вам, вероятно, захочется, чтобы теги strong и b не увеличивали жирность шрифта до фиксированного значения font-weight:700 , как это происходит по-умолчанию, а использовали промежуточные значения, рассчитанные исходя из жирности шрифта родительского элемента.
    Ведь не очень красиво, когда в ультратонком шрифте появляются жирные кляксы тегов strong .

    Возьмём для примера Open Sans.

    Open Sans имеет пять начертаний: Light 300, Normal 400, Semi-Bold 600, Bold 700 и Extra-Bold 800.
    Цифры соответствуют значению font-weight .

    Пусть основной текст имеет начертание Light 300, заголовки и цитаты — Normal 400, а промо-блок — Semi-Bold 600:

    Тег strong может встечаться и в основном тексте, и в цитатах, и промо-блоке. Надо это учесть.

    А нам хочется, чтобы у strong и b для основного текста было Normal 400, для цитат и заголовков — Bold 700, а для промо блока — Extra-Bold 800. Это сохранит контраст между жирным и нежирным текстом примерно равным во всех случаях.

    Уверен, многие пробовали использовать strong , но это не принесло ожидаемого результата — текст стал ещё жирнее, чем ожидалось.

    А всё потому, что согласно спецификации, значение bolder ( lighter ) увеличивает (уменьшает) унаследованное значение font-weight до следующего возможного для данного шрифта значения, согласно следующей таблице.

    наследуемое значение bolder lighter
    100 400 100
    200 400 100
    300 400 100
    400 700 100
    500 700 100
    600 900 400
    700 900 400
    800 900 700
    900 900 700

    Но в браузерной CSS прописано strong, b , т.е. унаследуется значение «700», а потом оно ещё и увеличивается до «900». Поэтому кажется, что bolder работает неправильно.

    Исправить это можно так:

    Именно так, как два отдельных правила. Первое обнуляет значение font-weight из браузерной таблицы стилей, второе задаёт жирность уже в относительных, а не абсолютных единицах.

    Теперь нам не придётся заботиться о вложенности элементов — каскад всё сделает автоматически. Мы можем вкладывать теги strong друг в друга.

    Вложенные теги «strong». Толщина шрифта определяется исходя из значения родительского элемента.
    Демка

    Ограничения

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

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

    Чтобы более тонко настроить вес шрифта, надо использовать абсолютные значения.


    Если у вас шрифт установлен в системе, но не подключен через @font-face , то Google Chrome определяет только Normal и Bold начертания шрифта. Чтобы локальный шрифт заработал, нужно дополнительно указать его font-family .

    Жирный и наклонный шрифт в комментариях

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

    [b]Жирный шрифт[/b]

    Upd: Добавили также:

    Ye теперь можно и поломать немного. ��
    Попробуем [b]незакрытый тег

    Не работает. Уже хлеб.

    Один баг (с тэгами) только что исправлен.

    Ещё в старом движке было распознавание смайлов — сочетания ��, ��, ��, �� (мож ещё какие). В новом этого нет, а нужно где-то брать юникодные символы смайлов; я вот пишу не со смарта, и в FF никаких смайлов нет (тем более в аналогичном FF под Linux).
    И это не говоря о том, что смайлы в шрифте визуально несравненно хуже тех gif’чиков.

    Кстати, ещё фича, хорошо работавшая в старом движке, но рудиментарная в нынешнем: корректное цитирование.

    1. В старом при цитировании сохранялась вся разметка цитируемого текста, в новом же — в лучшем случае переводы строк остаются.
    2. Как следствие — раньше работало вложенное цитирование: цитата в цитате выделялась отдельной рамкой/отступом. В нынешнем же всё сливается вместе, что постоянно приводит к недоразумениям, когда при цитировании реплики разных людей сливаются в единый поток.

    Понятно, что это вызвано новой иерархической структурой комментов, где вроде как необходимость в цитировании чуть ниже. Но в бурных обсуждениях, когда цитируемое сообщение и ответ могут быть далеко (потому что между ними ещё пачка ответов), отсутствие корректного цитирования сильно мешает.

    Выделяем важное жирным шрифтом

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

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

    Для начала, расскажу вам о тегах, связанных с вопросом важности.

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

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

    Давайте применим тег на практике. Заменим одну из книг на странице следующим кодом:

    В браузере это выглядит так:

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

    Раньше выделение ключевых слов на странице жирным шрифтом давало влияние на поисковую выдачу. Сейчас так делать не стоит — можно наткнуться на санкции со стороны поисковиков. Выделяйте реально значимые слова и фразы, которые будут важны для для людей, а не для роботов. Желаю вам удачи!

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL