Как сделать жирный шрифт в браузере

как в гугл хроме сделать жирный шрифт .

Подскажите пожалуйста название шрифта который следует выбрать в шрифтах .
Какой из них жирный .

Голосование за лучший ответ

CTRL + Ролик

в настройках. Доп. настройки и там вид страниц. настраивай шрифт как надо

Похожие вопросы

Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.

Тег HTML жирный текст

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

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

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

Все виды выделения текста описаны в статье: Теги форматирования текста в HTML.

Синтаксис

текст выделенный жирным

Тег в HTML5

По спецификации HTML5 приоритет использования следует отдавать тегам логического форматирования: теги — для выделения заголовков, тег — для важных фрагментов, тег — для акцентирования внимания, тег — для подсветки текста.

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

Отображение в браузере

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

Пример использования в HTML коде

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

Поддержка браузерами

Тег
	Да	Да	Да	Да	Да

by Lebedev

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

CSS урок 9. Выделение текста жирным шрифтом

Казалось бы, зачем использовать CSS для задания жирного шрифта, ведь в html есть специальный тег — , отвечающий за плотность текста. Более того, имеется его альтернатива — тег .

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

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

Видеоверсия:
[iframe align=»center» mode=»normal» autoplay=»no» maxwidth=»1280″]

Свойство, отвечающее за плотность текста

Плотность текста мы меняем при помощи свойства font-weight. Оно имеет довольно много значений, и среди них есть лишь два более или менее толковых. Я говорю так, потому что на практике вы чаще всего будете использовать два значения — normal и bold. Первое отвечает за отображение текста с нормальной, привычной толщиной, а второе — с полужирной. Например, давайте выделим все параграфы полужирным шрифтом.

Как видите, все довольно просто. А теперь, давайте отобразим заголовки второго и третьего уровней шрифтом нормальной толщины.

h2, h3

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

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

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

Как вы помните из урока по подключению шрифтов, они у нас бывают разной толщины и наклона. По плотности шрифты имеют показатели от 100 до 900, где 100 — самый тонкий, а 900 — самый жирный.

Нормальный шрифт, который мы привыкли видеть каждый день имеет толщину 400, что эквивалентно значению normal. Таким образом, мы можем указывать как значение normal, так и 400, разницы никакой нет. Например, давайте зададим заголовку первого уровня шрифт нормальной толщины.

То, что мы привыкли называть жирным шрифтом имеет толщину 700, и на самом деле является полужирным, а также полностью соответствует значению bold.

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

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

Для наглядности можно перейти к сервису google.com/fonts и подключить через директиву @import какой-нибудь шрифт только с нормальной и полужирной толщиной.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

Затем попробовать вывести ее на экран в плотности равном 300.

Однако, это ничего не дает, так как на сервере и на компьютере пользователя отсутствует файл шрифта Open Sans с тонким начертанием. Для пущей убедительности давайте подключим файл шрифта с толщиной в 300 (тонкий) и применим его ко всем параграфам.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
p

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

Но если вдруг появится необходимость задействовать какую-нибудь из них, теперь вы знаете как это сделать. А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
2. [popup_trigger tag=»span»] Подписывайтесь [/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

Скажем «нет» ложному жирному

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

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

Эти искусственные стили шрифта не являются проблемой для безопасных веб-шрифтов, в большинство которых уже включены стили для жирного и курсивного начертания. Но, в последнее время, появляются все больше и больше сайтов с ложным жирным, иногда от дизайнеров которые должны бы знать и знают проблему лучше других. Во всех случаях на лицо неправильное использование шрифтов. Или у шрифта как такового нет жирного или курсивного начертания, или свойство @font-face проставлено некорректно. От подобных проблем можно избавиться. Не позволяйте ложному жирному появиться на вашем сайте.

Заголовки и единое начертание отображаемых шрифтов

Представим, что вам захотелось использовать некий броский шрифт для ваших заголовков. Возможно вам приглянется шрифт Diplomata, который можно найти на сайте Google Web Fonts. Следуя инструкциям ниже вы можете подключить его для ваших элементов h1:

  h1 Yikes!

Что даст подобный результат в Firefox:

Рис. 1: Diplomata в ложном жирном начертании

Dipomata содержит только одно начертание, поэтому правило @font-face , код которого вы получаете, содержит настройку font-face: normal; . Однако, так как в заголовки обычно по умолчанию имеют font-weight: bold; браузер размазывает глифы в попытке эмулировать жирное начертание. В предпросмотре шрифта вы могли видеть элегантные полосы в штрихах букв и он уже имел честное жирное начертание. Ложный жирный, созданный браузером, почти уничтожил подобные детали.

Вы можете исправить подобное поведение Diplomata, добавив font-weight: normal; для h1 . Но это будет не слишком хорошим решением в случае когда шрифт недоступен и вам нужно деградировать в дефолтному списку шрифтов. Лучшим решением будет добавление еще одного правила @font-face для шрифтов с единым начертанием, показывающего, что данный шрифт может использоваться как для нормального текста, так и для жирного. Таким образом вы получите нормальное начертание вашего шрифта в заголовках и жирное, в случае его отсутствия и замены стандартным шрифтом.

Если вы перейдете по ссылке на шрифт Diplomata, используя браузер Internet Explorer, то увидите кроссбраузерный код @font-face , предоставленный Google. Вы можете скопировать этот код себе, изменив свойство font-weight на bold .

  @font-face < font-family: 'Diplomata'; font-style: normal; font-weight: bold; src: url('http://themes.googleusercontent.com/static/fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kPY6323mHUZFJMgTvxaG2iE.eot'); src: local('Diplomata'), local('Diplomata-Regular'), url('http://themes.googleusercontent.com/static/fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kPY6323mHUZFJMgTvxaG2iE.eot') format('embedded-opentype'), url('http://themes.googleusercontent.com/static/fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'); >h1 Yikes!

Это сохранит дизайн выбранного шрифта:

Рис. 2: Diplomata без ложного жирного начертания

Так как Diplomata сам по себе жирный, он подходит для заголовков в нормальном начертании. Если вместо него будет использован другой шрифт из списка, заголовки все равно останутся жирными. Трюк с дублированием @font-face сработает и с другими шрифтовыми сервисами. В своем примере, я продублировал правило, которое использует Google, но если вы сами составляете ваше правило, то, возможно, вы захотите проверить @font-face , предложенный такими сервисами как FontSpring, Font Squirrel или Paul Irish. Если на вашем сайте используется шрифт с единым начертанием, то вы можете избежать проблемы ложного жирного путем добавления дополнительного правила @font-face .

Учтите, что спецификация CSS3-Fonts определяет свойство font-synthesis , при помощи которого можно контролировать нужно ли использовать ложный жирный или ложный курсив, используя одно правило @font-face . Но, в настоящее время, ни один браузер не реализовал поддержку этого свойства. Дублирование правил @font-face — единственный способ контролировать подобное поведение в браузерах.

Не обманитесь, отсутствием жирного или курсива

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

К примеру возьмём шрифт Lora, предоставляемый Google Web Fonts. Если вы последуете дефолтным рекомендациям по внедрению шрифта, то вы получите только одно начертание, что даст вам следующие результаты в браузере Chrome для текста, заключенного в и

Рис. 3: Lora в ложном жирном и ложном курсивном начертании

На первый взгляд это выглядит не так плохо как слово «Yikes!», использованное выше, но вы можете заметить что жирный текст не такой уж и жирный, а курсив выглядит совсем не как закругленные элегантные глифы на странице с примерами начертаний Lora. Ваш текст может включать стилизацию жирным или курсивом, явную или неявную, но в случае отсутствия подобных начертаний в дело вступит браузер. А вот что вы хотели бы получить на самом деле:

Рис. 4: Настоящее жирное и курсивное начертание шрифта Lora

Интерфейс Google Fonts предупреждает пользователя не включать слишком много стилей. Вот дефолные настройки для шрифта Lora где стрелка указывает на желтое поле, показывая, что все в порядке.

Рис. 5: Шрифтовой веб-интерфейс с дефолтными настройками

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

Рис. 6: Шрифтовой веб-интерфейс со страшной красной шкалой

Если вы не уверены в необходимости дополнительных стилей, шкала может ввести вас в заблуждение: вы можете подумать, что вы делаете что-то не то, подключая их! Что, фактически, побуждает вас полагаться на размытые и скошенные тексты вместо реальных стилей, предоставляемых шрифтом.

Я не предлагаю вам полагаться только на сервис Google Web Fonts. Но, по крайней мере, если вы отметите там нужные галки для жирного и курсивного начертания этот сервис предложит вам корректно сформированное правило @font-face . Некоторые другие шрифтовые веб-сервисы предлагают отдельное правило @font-face для каждого из начертаний шрифта в семействе, каждое правило настроено на font-weight: normal; . Это может стать причиной всех тех проблем, которые я описал в статье, несмотря на то, что жирное и курсивное начертание присутствует в шрифте.

Итак, когда вы пользуетесь веб-сервисами для внедрения шрифтов, не поленитесь проверить как они отображаются в различных браузерах. чтобы удостовериться, что вы получили именно то, на что рассчитывали. Удостоверьтесь, что ваши правила @font-face соответствуют весу и стилю нужного шрифта, и что у вас есть @font-face для кажного из используемых начертаний. Не полагайтесь слепо на тот код, который предлагает вам веб-сервис. Если вы потратили время на выбор красивого кшрифта для вашего сайта, удостоверьтесь, что вы используете именно возможности шрифта, а не браузера при стилизации текста.

P.S. Это тоже может быть интересно:

• CSS-выражения от контейнера для дизайнеров
• Псевдокласс :has() — не только «родительский селектор»
• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами

Если вам понравилась статья, поделитесь ей!