Полужирное начертание css: font-weight | CSS | WebReference


25.08.1974 Facebook Twitter LinkedIn Google+ Разное


Содержание

Как использовать жирный шрифт HTML?

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

Не знаете как сделать текст жирным в CSS? CSS предоставляет нам специальное свойство font-weight, которое позволяет вывести полужирное начертание CSS.

Давайте взглянем на следующий пример:

<p>Пример <span>полужирного</span> текста при помощи CSS...</p>
<p>...а также полужирного выделения всего абзаца.</p>

Пример полужирного текста при помощи CSS…
…а также полужирного выделения всего абзаца.

С помощью этого свойства также можно указывать плотность текста. К тому же вы сможете определять текст, который не требуется выделять.

В приведенном выше примере используются встроенные стили. Но я настоятельно рекомендую вам использовать внешние файлы и CSS-классы, так как это поможет применять единую стилизацию ко всем страницам сайта одновременно.

Большинство людей, знакомых с языком гипертекста, когда видят жирный шрифт HTML, сразу же вспоминают о теге <b>.

Давайте рассмотрим пример того как выделить текст жирным в HTML при помощи тега <b>:

<p>Пример <b>полужирного</b> текста при помощи HTML-тега...</p>
<p><b>...а также полужирного выделения всего абзаца.</b></p>

Пример полужирного текста при помощи HTML-тега…
…а также полужирного выделения всего абзаца.

HTML-тег <b> — самый быстрый способ вывести текст полужирным.

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

HTML-тегКогда применяется
<b>Используется для вывода полужирного шрифта HTML, имеющего ключевое значение.
<em>Этот элемент позволяет привлечь внимание с помощью выделения определенного фрагмента текста.
<h2>, <h3>, <h4>, <h5>,
<h5> и <h6>
Эти теги используются для вывода подзаголовков различных уровней.
<mark>Используйте этот тег, когда хотите обратить внимание на определенное слово или фразу в справочных целях.
<strong>Этот элемент отражает важность и ценность обрамленного в него контента.

Элемент <b> следует использовать, когда другие элементы выделения не подходят. Если точнее: то элементы от <h2> до <h6> служат для выделения заголовков, акцентирование внимания производится с помощью элемента <em>, важные фрагменты следует выделять элементом <strong>, а текст справки можно отметить тегом <mark>.

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

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

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

Валентин Сейидовавтор-переводчик статьи «HTML Bold»

Работаем с насыщенностью шрифтов в CSS

Большинство шрифтов, которые мы используем, представлены в нескольких уровнях насыщенности. Самая распространенная градация: нормальное начертание (normal) и полужирное начертание (CSS bold). В этой статье я хочу познакомить вас с различными уровнями насыщенности шрифтов, доступными в CSS.

В CSS предусмотрены различные значения насыщенности, которые можно применять к шрифтам (конечно же, если они представлены в семействе шрифтов):

CSS-значениеОписание
100Тонкий
200Сверхлегкий
300Легкий
400Нормальное начертание (базовый)
500Средний
600Полужирное начертание
700Жирный шрифт
800Сверхжирное начертание
900Плотное начертание
normalЭквивалент значения 400 в CSS
CSS font boldЭквивалент значения 700 в CSS
BolderНа один уровень плотности больше, чем у родительского элемента
LighterНа один уровень плотности меньше, чем у родительского элемента
  • Вы будете сталкиваться с различными описаниями этих уровней, так как на данный момент не существует единых и универсальных названий и значений для них;
  • Если нужно добиться более точных настроек насыщенности шрифтов, то я не рекомендую использовать относительные значения плотности (то есть lighter или bolder), а вместо них использовать числовые значения;
  • В типографике каждый уровень насыщенности представляет собой отдельный шрифт, разработанный печатником. Из наиболее распространенных шрифтов для веб-страниц, лишь некоторые позволяют изменять уровни насыщенности (зачастую они представлены лишь в значениях 400 и 700, а во многих случаях только 400).

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

Уровень плотности шрифта Алгоритм выбора
100-300Если указанная насыщенность находится в этом диапазоне, то при отсутствии нужного уровня производится подбор подходящего варианта в порядке возрастания значения.
400Сначала проверяется значение 500. Если оно отсутствует, то подбор продолжается по вариантам ниже 400 в порядке убывания (то есть, 300-100), а затем по значениям выше 500 в порядке возрастания (то есть, 600-900).
500Сначала проверяется значение 400. Если оно отсутствует, то подбор продолжается по вариантам ниже 400 в порядке убывания (то есть, 300-100), а затем по значениям выше 500 в порядке возрастания (то есть, 600-900).
600-900Проверяются уровни насыщенности выше указанного значения, а затем перебираются значения ниже указанного в убывающем порядке.

Фальшивое жирное начертание:

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

Можно воспользоваться свойством font-synthesis, предусмотренным в CSS3. Оно отвечает за то, разрешено ли браузеру самостоятельно синтезировать полужирный стиль в тех случаях, когда семейство шрифтов выглядит как полужирный текст. Ниже представлен пример использования этого свойства:

/* запрещаем браузеру синтезировать полужирный стиль шрифта */
font-synthesis: none;

Прежде чем использовать о font-synthesis в своих проектах, проверьте браузерную совместимость.

Я думаю, что стоит сразу же ответить на вопросы, которые могут возникнуть:

Почему свойство font-weight принимает лишь девять числовых значений?

Эти девять значений позволяют охватить все традиционные типографские уровни насыщенности.

Почему бы не использовать строчные значения (CSS font weight bold)для указания насыщенности в CSS?

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

Почему числовые значения насыщенности в CSS начинаются с 100, а не с 1?

Шрифтовая шкала 100-900 продиктована форматом шрифта TrueType, в котором 400 – это регулярный стиль (то есть, базовый). Такая же шкала используется в CSS и в формате OpenType.

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

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

Пожалуйста, опубликуйте ваши комментарии по текущей теме статьи.

За комментарии, отклики, дизлайки, подписки, лайки низкий вам поклон!

Валентин Сейидовавтор-переводчик статьи «How To Fine-Tune Your Font Weights In CSS?»

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:

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
h2, h3, h4, h5, h5, h6,
blockquote {
  font-weight: 400;
}
. promo {
  font-weight: 600;
}

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

По-умолчанию:

strong, b {
	font-weight: bold; /* bold = 700 */
}

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

Уверен, многие пробовали использовать strong {font-weight: bolder;}, но это не принесло ожидаемого результата — текст стал ещё жирнее, чем ожидалось.

А всё потому, что согласно спецификации, значение 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 {font-weight: bold;}, т. е. унаследуется значение «700», а потом оно ещё и увеличивается до «900». Поэтому кажется, что bolder работает неправильно.

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

/* сбрасываем стандартное «bold», 
шрифт становится таким же как его родительский элемент */
strong, b {
  font-weight: inherit; 
}

/* теперь bolder будет вычисляться исходя из веса шрифта родительского элемента */
strong, b {
  font-weight: bolder;
}

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

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


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

Ограничения

Используя относительные значения

font-weight

мы получаем только по три градации жирности шрифта для

bolder

и

lighter

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

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

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

Баги

Если у вас шрифт установлен в системе, но не подключен через

@font-face

, то Google Chrome определяет только Normal и Bold начертания шрифта. Чтобы локальный шрифт заработал, нужно дополнительно указать его

font-family

.

.fw300 {
  font-family: "Open Sans Light", "Open Sans";
  font-weight: 300;
}
. fw600 {
  font-family: "Open Sans SemiBold", "Open Sans";
  font-weight: 600;
}

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

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

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

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

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

Пример записи:


p {
font-weight: bold;
}

Насыщенность шрифта вы можете регулировать с помощью ключевых слов 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 Наследует значение родителя

Пример записи:


p {
font-style: italic;
}

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

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

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

Узнаем как изготовить в CSS жирный шрифт?

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

Присваивание

Жирный шрифт CSS присваиваете с помощью простого правила: font-weight. В качестве значения можно указать различные комбинации. Например, можно написать свойство «font-weight: bold», что означает полужирное начертание. В качестве стандартного значения используется запись «normal». Помимо ключевых слов можно использовать обычные цифры. Условные единицы колеблются от 100 до 900, где 400 соответствует команде «normal». А это означает, что если установить значение меньше 400, то шрифт будет терять свою насыщенность, а если более, то приобретет жирный вид. Это позволяет производить ручную настройку начертания.

В CSS жирный шрифт может присваиваться, исходя из родительского элемента. В каскадных таблицах существует две команды («bolder» и «lighter»), которые могут увеличивать или уменьшать насыщенность начертания. Значения будут изменяться в зависимости от родительского элемента. Свойство «font-weight» может записываться в краткой форме – «font», куда можно записать все характеристики шрифта.

Цель

Присваивать такой CSS-шрифт можно любому элементу HTML или XHTML. Эффект будет виден только в том случае, если тег содержит в себе текст. В HTML существует аналог свойству «font-weight». Если поместить текст между тегами <strong>, то он станет более насыщенным. Его свойство полностью идентично значению «bold». Некоторые разработчики не видят разницы между тегом <strong> и CSS жирный шрифт. А различия есть. Тег имеет свою собственную смысловую нагрузку, используется для действительно важной информации. А CSS-свойство – это всего лишь декоративное значение, употребляемое для украшения текста. Пускай данная разница и не ощущается при чтении, но, как советует консорциум всемирной паутины, все должно стоять на своих местах. Такой порядок в коде увеличит жизнь вашим страницам. Ведь не за горами то время, когда браузеры научатся использовать другой способ визуализации текста, где будет выделяться смысловое и декоративное значение. Не стоит об этом забывать при создании своих страниц.

Заключение

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

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

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

Жирный текст

Всеми известный жирный шрифт, который можно увидеть везде. Для этого было разработано два тега и . Тег , более распространенный. Эти теги не одинаковы, хоть и результат схож. Различие заключается в том, что тег определяет физическую жирность текста, а тег определяет важность этого текста и выделяет его жирным начертанием. Но, большое «но», в современных браузерах их права «уравняли», они стали равнозначными (эквивалентными). Такая же ситуация и у тегов и . Следовательно, выгоднее использовать тег, который короче. Далее пример:

Жирный текст

Курсивный текст

За акцентирование курсивным шрифтом, отвечают теги и . Как сказано выше, они различны по своей направленности, но в современных браузерах эквивалентны. Далее пример:

Подчеркнутый текст

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

Подчеркнутый текст

Зачеркнутый текст

Для того чтобы зачеркнуть текст, используют два эквивалентных тега: и . Эти два тега осуждают и рекомендуют взамен им использовать стили. А тег категорически запрещен в HTML5. Далее пример:

Зачеркнутый текст

Крупнее и мельче обычного текста

Акцентировать текст, можно и увеличив размер это текста. Для этого есть тег . Чтобы текст был мельче обычного, применяют тег . Но все же выгодно использовать всегда стили CSS. Далее пример:

Крупнее текст

Замена жирного текста стилями CSS

Есть такое свойство в CSS – font-weight . Оно принимает много значений: font-weight :bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900 . Чтобы сделать текст самым жирным, нужно использовать значение font-weight : 900 . О нем мы еще поговорим в следующих уроках.

Замена курсивного текста стилями CSS

В CSS есть аналог тегу (Курсивный текст). Это свойство font-style . Далее пример:

I {
font-style: italic;
}

Замена подчеркнутого текста стилями CSS

Тег осуждается спецификацией HTML и рекомендуется использовать стили. Аналогом может служить свойство text-decoration . Я обычно его использую, чтобы убрать подчеркивание у ссылок (значение none), но в этом случае нам нужно добавить подчеркивание (значение underline). Далее пример:

Подчеркнутый текст

U {
text-decoration: underline;

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

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

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

Возможности начертания в html

Шрифт текстового контента всегда можно видоизменить. Например, задать жирное начертание или курсивное, а также его можно декорировать. Для этого существуют простые теги, которые очень легко запомнить и после применять. Ниже представлена таблица элементов, которая разъясняет их предназначение.

Для начала разберемся с жирным начертанием текстовых элементов.

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

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

А предназначен для акцентирования внимание на ключевом моменте. Это логический элемент, который во время разговора выделялся бы интонацией.

Теперь рассмотрим такие теги, как и .

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

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

Инструменты видоизменения шрифтов в css

Css не отстало и предлагает девелоперам похожие инструменты для редакции текста. Это такие свойства, как text-decoration и font.

– это универсальный параметр, который дополняет шрифт некими деталями. Так, текст можно «заставить» мигать (blink), подчеркнуть (underline) или зачеркнуть (line-through), провести линию над словами (overline), унаследовать характеристики родительского объекта (inherit) или очистить формат шрифта от всех дополнений (none).

Вторым часто применяемым механизмом для редактирования текстового контента является свойство font. С его помощью можно изменять стиль шрифта (font-style), его размер (font-size), задавать капитель, т.е. указывать вид строчных букв (font-variant), а также «играться» с начертанием (font-weight).

А вот и пример

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

Видоизменение текста

Пишем текстовый контент самого абзаца, который мигает .

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

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

С уважением, Роман Чуешов

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

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

Правила и порядок написания тегов

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

Когда браузер обработает этот фрагмент, то вы увидите вот такой текст: Выделенный фрагмент. Кстати, в RSS ленте все теги не отображаются ().

Главное при написании тегов — не забывайте их закрывать. Иначе весь текст на странице будет выделен жирным (в примере с тегом ). Но бывают такие случаи, когда нужно выделить определенный фрагмент и жирным и курсивом одновременно. Но тега, выполняющего это действие, не существует. Выход из этой ситуации один: использовать два тега одновременно. В каком порядке их использовать значения не имеет. Поэтому, написав текст с тегами так:

Выделенный фрагмент

или вот так:

Выделенный фрагмент

Вы все равно получите Выделенный фрагмент курсивом и жирным одновременно. Однако, предпочтительно использовать первый вариант, потому что изначально он был единственным и правильным. Также не стоит забывать о том, что каждый браузер может обрабатывать теги по-разному (), в зависимости от настроек. А теперь перейдем к самим тегам форматирования

Выделение текста жирным и курсивом — теги

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

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

Текст в тегах strong

Текст в тегах b

А вот как выглядят две данные строчки в исходном коде страницы:

Текст в тегах strong Текст в тегах b

Ту же ситуацию мы можем наблюдать в случае с тегами выделения курсивом и . Попытайтесь найти отличия между двумя примерами:

Текст в тегах em

Текст в тегах I

А вот исходный код:

Текст в тегах em Текст в тегах I

Итак, рассмотренные теги выделения жирным и курсивом фактически не отличаются, но зачем же тогда нам, например, тег если есть ? Ведь последний содержит всего один символ (не считая скобок) и, следовательно, легче в написании. А все дело в том, что теги и влияют на . Если вы будете окружать этими тегами ключевые слова, то это благоприятно скажется на продвижении сайта.Главное не переусердствовать — максимум в тексте должно быть 5% жирного текста в теге , и столько же и курсива в теге .

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

Теги выделения текста чертой —

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

Еще два схожих по назначению тега — и . Оба выполняют функцию зачеркивания текста. Использовать этот тег можно в любых ситуациях: если вы обновляете документ (а точнее его часть), то можно перечеркнуть старое и добавить новое; если вы собираетесь написать нечто, отходящее от темы материала; что-то не соответствующее морально-этическим нормам.

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

Тег и атрибуты — параметры шрифта текста

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

  • face — сам шрифт. Например, Arial, Courier или Verdana. Можно перечислить несколько, т.к. не у всех пользователей имеется обширный набор шрифтов, а написав несколько в атрибуте face, браузер сможет выбрать, какой использовать, а точнее — какой присутствует в системе;
  • size — атрибут, указывающий размер текста. Может быть выражен как в условных единицах, так и в пикселях;
  • color — цвет текста. Данный атрибут можно использовать как в HTML-кодах цветов, так и в словесных. Первые имеют вид #FFFFFF (где F — любая цифра или буква от A до F), а вторые записываются простыми словами (например, red — красный).

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

Этот текст имеет размер 6px

Этот текст красного цвета
Этот текст имеет шрифт Arial
Этот текст красного цвета и размера 5px

А вот что вы увидите, после обработки написанного кода:

Блочные элементы оформления текста — заголовки

Напоследок мы рассмотрим блочные элементы, которые используются практически в каждом документе. Это теги заголовков и абзаца. Рассмотрим первое. Заголовки бывают 6-ти видов и каждый имеет свой тег. Каждый вид носит лишь свой порядковый номер и записывается с помощью тегов

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

А теперь поговорим про тег выделения абзаца

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

В зеленых прямоугольниках один абзац, в красных — другой. А вот как этот код выглядит после обработки браузером (стрелочка указывает на пустую строку):

В итоге мы получаем довольно заметное отделение одного абзаца от другого, что идет на пользу — чтение становится более удобным.

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

Чтоб наша WEB страничка смотрелась более презентабельно, разделим текст на абзацы и выделим заголовок. HTML имеет 6 уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6. Заглавия объявляются парой тегов с номерами, надлежащими уровню, к примеру,

— заголовок раздела первого уровня, а
— заголовок раздела шестого уровня.
От обычного текста заглавия отличаются размером и шириной букв. Заголовок первого уровня h2 отображается обычно очень большим шрифтом, в то время как заголовок шестого уровня h6 — очень маленьким.

Заглавия

Не следует путать заглавия разделов документа с рассмотренным ранее заголовком документа, определяемым элементом

.

В качестве заголовка текста используем первое предложение — Для этого довольно ограничить его тегами

.

Воткните в текст файла other.html теги

так, чтоб они ограничивали первое предложение текста, и этот кусок кода принял последующий вид:

Просмотрим приобретенный итог.

Сохраните файл, выбрав команду меню программки Блокнот (Notepad) Файл — Сохранить (File — Save).

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

Восстановите окно браузера, нажав его кнопку на Панели задач (Taskbar).

Нажмите кнопку F5 либо кнопку Обновить (Refresh) на панели инструментов рабочего окна программки . Файл other.html будет перезагружен, и вы увидите в окне браузера, как смотрится заголовок первого уровня.

Просмотрите, как будут смотреться заглавия других 5 уровней, изменяя в тегах номера: h3, h4 и так далее После каждого конфигурации не забывайте сохранять файл и обновлять изображение в окне браузера.

Когда вы закончите опыты, опять восстановите в файле other.html теги

.

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

Выравнивание заголовков

По умолчанию заголовок выравнивается по левому краю странички. Но его можно также выровнять по правому краю либо центрировать. Для правостороннего выравнивания в теге

Добавьте в тег

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

Как в HTML сделать текст выделенным (жирным)

Сейчас займемся остальным текстом. Увеличим его размер и оформим текст полужирным курсивным начертанием. Для установки полужирного начертания употребляются парные теги .

Воткните в файле other.html открывающий и закрывающий теги так, чтоб они ограничили текст Тут вы узнаете… Этот элемент должен принять последующий вид:

Как в HTML сделать текст курсивом

Курсивное начертание устанавливается при помощи тегов .

Воткните в начальный код HTML тег и так, чтоб отредактированный элемент принял последующий вид:

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

Элементы разметки могут быть вложенными, как в данной структуре, где элемент вложен в элемент . Современные браузеры способны верно обрабатывать вложенные теги. Потому для вас нужно смотреть за тем, чтоб не нарушался порядок вложения. Работа браузера окажется затрудненной, если вложенность будет нарушена. К примеру, такая запись будет неверной: . Соблюдение вложенности — очень принципиальная часть общей культуры написания HTML кода.

Как в HTML сделать текст подчеркнутым

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

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

Как в HTML прирастить текст

Сейчас увеличим размер шрифта текста. Это можно сделать различными методами.

Теги наращивают размер шрифта текста, заключенного меж ними.

Добавьте в начало и конец вышеуказанного куска кода соответственно теги и так, чтоб элемент принял последующий вид:

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

При помощи тегов вы сможете уменьшить размер шрифта текста по сопоставлению с начальным.

Другой метод указания размера шрифта — при помощи тегов с атрибутом size. В качестве значений этого атрибута употребляются целые числа от 1 до 7. При этом значение 1 соответствует наименьшему размеру шрифта, а значение 7 — наибольшему.

Используя заместо тегов теги вида , просмотрите как меняется размер шрифта текста при различных значениях атрибута size — от 1 до 7.

В качестве значения атрибута size можно также использовать числа от 1 до 7 со знаком + (плюс) либо — (минус). В данном случае размер шрифта соответственно возрастает либо миниатюризируется, по сопоставлению с начальным, к примеру, теги прирастят размер шрифта, по сопоставлению с текущим, на один уровень. Проверьте.

Установите 5 в качестве значения атрибута size для рассматриваемого куска текста: . HTML код этого куска должен быть таким:

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

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

По умолчанию абзац с текстом Тут Вы узнаете… выровнен налево. Центрируем его по горизонтали при помощи тегов

. Вы сможете также выровнять абзац по правому краю странички при помощи тегов либо по левому — при помощи тегов .

Воткните теги

ограничив ими обозначенный абзац.

Направьте внимание, что для центрирования абзаца мы использовали теги

, в отличие от атрибута align=»center», который применен нами в тегах .

Внимание ! На 2010 год теги , , , числятся устаревшими и потому требуется использовать аналоги из стилей. Это не означает, что использовать их нельзя, но при способности пытайтесь от их избавляться.

=

=

=

=

=

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

Коды выделения

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

— применяется для определения слова. Текст выводится курсивом по умолчанию.

— для выделения слов и усиления. Текст отображается курсивом по умолчанию.

— для выделения заглавий книжек, кинофильмов, спектаклей и так далее выводится курсивом по умолчанию.

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

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

— служит для отображения сообщений программ. Выводится шрифтом фиксированной ширины. Тег устаревший .

— для особо принципиальных фрагментов. Обычно выделяется полужирным начертанием.

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

Спецификация HTML 4.0 предлагает более прогрессивный метод указания стилей текста и других частей — при помощи специального языка каскадных таблиц стилей CSS (Cascading Style Sheets). Таблицы стилей — это огромное достижение в области WEB дизайна, расширяющее способности улучшения внешнего облика страничек. Таблицы стилей упрощают определение интервалов меж строчками, отступов, цветов, применяемых для текста и фона, размера и стиля шрифтов и так далее Стиль большинства частей HTML может описываться при помощи атрибута style, который размещается внутри открывающего тега элемента. В качестве значения атрибута style употребляются пары вида «свойство: значение». К примеру, во куске кода, описывающего заголовок раздела,

Поглядим, как при помощи языка каскадных таблиц стилей указать стиль текстового куска, который начинается словами Тут Вы узнаете…

Для указания толщины шрифта употребляется свойство font-weight со значениями lighter (узкий), bold (полужирный), bolder (жирный), к примеру,.

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

Если требуется указать размер шрифта, то следует пользоваться свойством font-size, значения которого можно указать в относительных либо абсолютных величинах. Относительные величины — это проценты, а в качестве абсолютных величин употребляются пункты (pt), пикселы (рх), сантиметры (cm), миллиметры (mm). К примеру:

style=»font-size: 200%»

style=»font-size: 16pt»

style=»font-size: 100px»

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

Для определения метода выравнивания текста по горизонтали употребляется свойство text-align со значениями left (налево), right (на право), center (по центру), justify (по ширине). Таким макаром, чтоб указать, что текст Тут Вы узнаете… должен быть оформлен полужирным курсивным начертанием с размером 150% от начального и выровнен по центру, следует его стиль найти последующим образом:

style=»font-weight: bold; font-style: italic; font-size: 150%; text-align: center»

Этот атрибут мы применим в тегах р>, которые позволяют представить текст в виде отдельного абзаца.

Отредактируйте элемент HTML, включающий текст Тут Вы узнаете… удалив теги

, , , и вставив теги и р> с атрибутом style так, чтоб этот элемент принял последующий вид:

Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производимр>

Видите ли, язык HTML позволяет использовать различные методы стилевого дизайна. Совместно с тем, применение языка каскадных таблиц стилей CSS является более желаемым.

Другие варианты выравнивания и использования стилей

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

Это делается при помощи атрибута style, применяемого с большинством стандартных тегов HTML. Но есть и другие варианты использования CSS.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

translated-content/index.html at main · mdn/translated-content · GitHub

title: font-weight
slug: Web/CSS/font-weight
tags:
— CSS
— Свойства
— Справка
— Шрифты
translation_of: Web/CSS/font-weight
<div>{{CSSRef}}</div>
<p><a href=»/ru/docs/Web/CSS» title=»CSS»>CSS</a> свойство <strong><code>font-weight</code></strong> устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.</p>
<div>{{EmbedInteractiveExample(«pages/css/font-weight.html»)}}</div>
<h3>Синтаксис</h3>
<pre>font-weight: normal;
font-weight: bold;
/* Relative to the parent */
font-weight: lighter;
font-weight: bolder;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;
</pre>
<h4>Значения</h4>
<dl>
<dt><code>normal</code></dt>
<dd>Нормальное начертание. То же, что и <code>400</code>.</dd>
<dt><code>bold</code></dt>
<dd>Полужирное начертание. То же, что и <code>700</code>.</dd>
<dt><code>lighter</code></dt>
<dd>Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).</dd>
<dt><code>bolder</code></dt>
<dd>Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).</dd>
<dt><code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code></dt>
<dd>Цифровые значения насыщенности шрифтов, которые позволяют задавать больше, чем нормальное и полужирное начертание. </dd>
</dl>
<h4>Недоступность заданного значения</h4>
<p>Если заданное цифровое значение насыщенности недоступно, для определения толщины отображаемого шрифта используется следующий алгоритм:</p>
<ul>
<li>Если задано значение выше <code>500</code>, будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).</li>
<li>Если задано значение менее <code>400</code>, будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное). </li>
<li>Если задано значение <code>400</code>, будет применено <code>500</code>. Если <code>500</code> недоступно, то будет использован алгоритм для подбора значений менее <code>400</code>.</li>
<li>Если задано значение <code>500</code>, будет применено <code>400</code>. Если <code>400</code> недоступно, то будет использован алгоритм для подбора значений менее <code>400</code>.</li>
</ul>
<p><span lang=»ru»><span>Это означает, что</span> <span>для шрифтов</span><span>, которые предоставляют</span> <span>только</span> <span>normal и</span> bold<span> начертания,</span> <span>100-500</span> <span>normal</span><span>,</span> <span>и</span> <span>600-900</span> bold<span>. </span></span></p>
<h4>Значение относительных весов</h4>
<p>Когда используется <strong>жирнее </strong>или <strong>светлее</strong>, следующая таблица используется для вычисления абсолютного веса элемента:</p>
<table>
<thead>
<tr>
<th>наследуемое значение</th>
<th><code>жирнее</code></th>
<th><code>светлее</code></th>
</tr>
</thead>
<tbody>
<tr>
<th>100</th>
<td>400</td>
<td>100</td>
</tr>
<tr>
<th>200</th>
<td>400</td>
<td>100</td>
</tr>
<tr>
<th>300</th>
<td>400</td>
<td>100</td>
</tr>
<tr>
<th>400</th>
<td>700</td>
<td>100</td>
</tr>
<tr>
<th>500</th>
<td>700</td>
<td>100</td>
</tr>
<tr>
<th>600</th>
<td>900</td>
<td>400</td>
</tr>
<tr>
<th>700</th>
<td>900</td>
<td>400</td>
</tr>
<tr>
<th>800</th>
<td>900</td>
<td>700</td>
</tr>
<tr>
<th>900</th>
<td>900</td>
<td>700</td>
</tr>
</tbody>
</table>
<h4>Определение веса имени</h4>
<p>Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:</p>
<table>
<thead>
<tr>
<th scope=»col»>Значение</th>
<th scope=»col»>Общее название</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>100</code></td>
<td>Тонкий (Волосяной) Thin (Hairline)</td>
</tr>
<tr>
<td><code>200</code></td>
<td>Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light)</td>
</tr>
<tr>
<td><code>300</code></td>
<td>Светлый Light</td>
</tr>
<tr>
<td><code>400</code></td>
<td>Нормальный Normal</td>
</tr>
<tr>
<td><code>500</code></td>
<td>Средний Medium</td>
</tr>
<tr>
<td><code>600</code></td>
<td>Полужирный Semi Bold (Demi Bold)</td>
</tr>
<tr>
<td><code>700</code></td>
<td>Жирный Bold</td>
</tr>
<tr>
<td><code>800</code></td>
<td>Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold)</td>
</tr>
<tr>
<td><code>900</code></td>
<td>Чёрный (Густой) Black (Heavy)</td>
</tr>
</tbody>
</table>
<h4>Интерполяция</h4>
<p>Значения <code>font-weight</code> интерполируются  с помощью дискретных шагов (кратные 100). <span lang=»ru»><span>Интерполяция</span> <span>происходит в действительном пространстве чисел</span> <span>и превращается</span> <span>в целое число путём</span> <span>округления до</span> <span>ближайшего числа, кратного</span> <span>100,</span> <span>со значениями</span> <span>посредине между</span> <span>кратными 100</span> <span>округлёнными</span> <span>в сторону</span> <span>положительной бесконечности</span><span>.</span></span></p>
<h4>Формальный синтаксис</h4>
{{csssyntax}}
<h3>Примеры</h3>
<h4>HTML</h4>
<pre>&lt;p&gt;
Alice was beginning to get very tired of sitting by her sister on the
bank, and of having nothing to do: once or twice she had peeped into the
book her sister was reading, but it had no pictures or conversations in
it, ‘and what is the use of a book,’ thought Alice ‘without pictures or
conversations?’
&lt;/p&gt;
&lt;div&gt;I’m heavy&lt;br/&gt;
&lt;span&gt;I’m lighter&lt;/span&gt;
&lt;/div&gt;
</pre>
<h4>CSS</h4>
<pre>/* Назначение тексту элемента &lt;<code>p&gt;</code> жирного начертания. */
p {
font-weight: bold;
}
/* Назначение тексту элемента &lt;div&gt; жирности, которая больше на два уровня,
чем normal, но все ещё меньше, чем стандартный bold. */
div {
font-weight: 600;
}
/* Назначение тексту элемента &lt;span&gt; жирности,
которая на один уровень меньше, чем у его родителя. */
span {
font-weight: lighter;
}</pre>
<h4>Result</h4>
<p>{{EmbedLiveSample(«Примеры»,»400″,»300″)}}</p>
<h3>Спецификации</h3>
{{Specifications}}
<p>{{cssinfo}}</p>
<h3>Совместимость браузеров</h3>
<p>{{Compat}}</p>

Свойство CSS font-weight


Пример

Установить разную толщину шрифта для трех абзацев:

p. normal {
  начертание шрифта: нормальное;
}

p.thick {
 начертание шрифта: полужирный;
}

p.thicker {
  начертание: 900;
}

Попробуй сам »

Определение и использование

Свойство font-weight определяет, насколько толстыми или тонкими должны отображаться символы в тексте.


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

Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

Недвижимость
вес шрифта 2,0 4,0 1,0 1,3 3,5


Синтаксис CSS

вес шрифта: нормальный|жирный|жирнее|светлее| номер |начальный|наследовать;

Значения свойств

.
Значение Описание Играй
обычный Определяет обычные символы. Это по умолчанию Играй »
полужирный Определяет толстые символы Играй »
жирнее Определяет более толстые символы Играй »
зажигалка Определяет более светлые символы Играй »
100
200
300
400
500
600
700
800
900
Определяет от тонких до толстых символов.400 соответствует обычному, а 700 соответствует полужирному Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальный Играй »
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник по CSS

: Шрифт CSS

Ссылка CSS: свойство шрифта

Ссылка на HTML DOM: свойство fontWeight



Свойство зазора CSS


Пример

Установить зазор между столбцами строк и на 50 пикселей:

. grid-container {
 промежуток: 50 пикселей;
}

Попробуй сам »

Определение и использование

Свойство gap определяет размер разрыв между строками и столбцами. Это сокращение от следующие свойства:

Примечание: Свойство gap ранее называлось зазор сетки .

Значение по умолчанию: нормальный нормальный
Унаследовано: нет
Анимация: да.Читать о анимированном Попробуй
Версия: Модуль выравнивания блоков CSS, уровень 3
Синтаксис JavaScript: объект .style.gap=»50px 100px» Попробуй

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

Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

Недвижимость
пробел (в нескольких столбцах) 66 16 61 Не поддерживается 53
зазор (в сетке) 66 16 61 10. 1 53
зазор (во Flexbox) 84 84 63 Не поддерживается 70


Синтаксис CSS

Значения свойств

Значение Описание Играй
междурядье Устанавливает размер промежутка между строками в макете сетки Играй »
зазор между столбцами Устанавливает размер промежутка между столбцами в макете сетки Играй »

Дополнительные примеры

Пример

Установите расстояние между строками на 20 пикселей и между столбцами на 50 пикселей:

.grid-container {
 промежуток: 20 пикселей 50 пикселей;
}

Попробуй сам »

Связанные страницы

Учебное пособие по CSS: CSS Grid Layout

Справочник по CSS: свойство row-gap

Справочник по CSS: свойство column-gap



font-weight — CSS: Каскадные таблицы стилей

Свойство CSS font-weight устанавливает толщину (или жирность) шрифта. Доступные веса зависят от семейства шрифтов , которое установлено в данный момент.

 
вес шрифта: нормальный;
вес шрифта: полужирный;


вес шрифта: светлее;
вес шрифта: жирнее;


вес шрифта: 100;
вес шрифта: 200;
вес шрифта: 300;
вес шрифта: 400;// обычный
вес шрифта: 500;
вес шрифта: 600;
вес шрифта: 700; // полужирный
вес шрифта: 800;
вес шрифта: 900;


вес шрифта: наследовать;
вес шрифта: начальный;
вес шрифта: вернуться;
вес шрифта: не установлен;
  

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

Значения

нормальный

Обычный вес шрифта.То же, что и 400 .

полужирный

Вес полужирного шрифта. То же, что и 700 .

зажигалка

На один относительный вес шрифта светлее родительского элемента. Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.

жирнее

На один относительный вес шрифта больше, чем у родительского элемента.Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.

<номер>

A <число> значение от 1 до 1000 включительно. Более высокие числа представляют веса, которые выделены жирнее (или так же жирно, как) меньшие числа. Некоторые часто используемые значения соответствуют общим именам гирь, как описано в разделе «Сопоставление общих имен гирь» ниже.

В более ранних версиях спецификации font-weight свойство принимает только значения ключевых слов и числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900; неизменяемые шрифты могут реально использовать только эти установленные значения, хотя более мелкие значения (т. г. 451) будет преобразовано в одно из этих значений для непеременных шрифтов с использованием системы весов Fallback.

Шрифты CSS уровня 4 расширяют синтаксис, чтобы принимать любое число от 1 до 1000, и вводят шрифты Variable, которые могут использовать этот гораздо более тонкий диапазон веса шрифта.

Резервные веса

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

  • Если заданный целевой вес находится в диапазоне от 400 до 500 включительно:
    • Найдите доступные веса между целевым значением и 500 в порядке возрастания.
    • Если совпадений не найдено, ищите доступные веса меньше целевого в порядке убывания.
    • Если совпадений не найдено, найдите доступные веса больше 500 в порядке возрастания.
  • Если указан вес меньше 400 , ищите доступные веса меньше целевого в порядке убывания. Если совпадений не найдено, найдите доступные веса, превышающие целевой, в порядке возрастания.
  • Если указан вес больше 500 , найдите доступные веса больше целевого в порядке возрастания.Если совпадений не найдено, ищите доступные веса меньше целевого в порядке убывания.

Значение относительного веса

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

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

Унаследованное значение жирнее зажигалка
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

Сопоставление общих имен гирь

Числовые значения от 100 до 900 примерно соответствуют следующим общим именам гирь (см. спецификацию OpenType):

Значение Общее название веса
100 Тонкий (линия волос)
200 Сверхлегкий (Сверхлегкий)
300 Свет
400 Обычный (Обычный)
500 Средний
600 полужирный (полужирный)
700 Жирный
800 Extra Bold (Сверхжирный)
900 Черный (тяжелый)
950 Экстра-черный (Ультра-черный)

Вариативные шрифты

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

Для изменяемых шрифтов TrueType или OpenType вариант «wght» используется для реализации различной ширины.

Примечание: Для работы приведенного ниже примера вам потребуется браузер, поддерживающий синтаксис CSS Fonts Level 4, в котором font-weight может быть любым числом между 1 и 1000 .Демонстрация загружается с шрифтом , вес шрифта: 500; . Измените значение, чтобы увидеть изменение веса текста.

Людям со слабым зрением может быть трудно читать текст, для которого задано значение 100 (тонкий/линия волос) или 200 (сверхлегкий), особенно если шрифт имеет низкий коэффициент контрастности цвета.

Установка толщины шрифта

HTML
  

Алиса начала очень уставать от того, что сидела рядом с сестрой на диване. банка, и от нечего делать: раз или два она заглянула в книгу, которую читала ее сестра, но в ней не было ни картинок, ни разговоров. «И что толку в книге, — подумала Алиса, — без картинок или разговоры?"

Я тяжелый
Я легче
УСБ
 
п {
  вес шрифта: полужирный;
}


дел {
 вес шрифта: 600;
}


охватывать {
  вес шрифта: светлее;
}
  
Результат

Таблицы BCD загружаются только в браузере

HTML: 3 способа сделать текст полужирным в CSS

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

Сделать текст жирным в примерах CSS

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

Кроме того, вы можете использовать встроенный CSS для элементов и можете использовать элементы и , чтобы сделать текст жирным в абзаце. Ниже приведены примеры:

1.

Использование свойства font-weight в разделе Head

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

Синтаксис для веса шрифта

 вес шрифта: нормальный|жирный|жирнее|светлее|число|начальный|наследовать; 

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

 вес шрифта: 700;
вес шрифта: полужирный; /* то же, что и 700 */
вес шрифта: нормальный; /* то же, что и 400 */
вес шрифта: светлее; /* относительно родительского элемента */ 

CSS для класса в разделе Head

 <стиль>
.  полужирный_текст  {
    вес шрифта: полужирный;
}
 

HTML

 <тело>

Этот полный абзац выделен жирным шрифтом.

Выход

  Весь абзац выделен жирным шрифтом.   

2. Использование элемента

Поместите элемент между элементом абзаца, чтобы выделить определенную часть абзаца жирным шрифтом.

 HTML

 

Некоторая часть абзаца выделена жирным шрифтом .

Выход

 Часть абзаца  выделена жирным шрифтом  . 

3.Использование элемента

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

HTML

 

Некоторая часть абзаца выделена жирным шрифтом с использованием сильного элемента .

Выход

 Часть абзаца выделена полужирным   с использованием сильного элемента  . 

Полный пример

 


<голова>
    <стиль>
        .жирный текст {
            вес шрифта: полужирный;
        }
    


<тело>
     

Примеры: выделение текста полужирным шрифтом в CSS

Использование класса CSS

Этот полный абзац выделен жирным шрифтом.

Использование элемента b

Некоторые части абзаца выделены жирным шрифтом.

Использование сильного элемента.

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

Выход

Как показано на изображении в этой статье.

Рекомендуемые книги для CSS

HTML и CSS: дизайн и создание веб-сайтов

15,79 $

29,99 $

по состоянию на 5 февраля 2022 г. 6:36

CSS: Полное руководство: визуальное представление для Интернета

66,54 $

69,99 $

по состоянию на 5 февраля 2022 г. 6:36

Веб-дизайн с HTML, CSS, JavaScript и jQuery Set

29 долларов.99

58,00 $

по состоянию на 5 февраля 2022 г. 6:36

HTML и CSS: дизайн и создание веб-сайтов

рупий. 1 912

рупий. 2 183

по состоянию на 5 февраля 2022 г. 6:36

рупий. 3 535

рупий. 3 702

по состоянию на 5 февраля 2022 г. 6:36

Последнее обновление: 5 февраля 2022 г., 6:36

Рекомендуемые курсы для CSS

См. также:

Введение в толщину шрифта HTML/CSS

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

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

Если вы хотите попробовать это самостоятельно, скопируйте код и вставьте его в текстовый редактор, например Блокнот или Блокнот++. Мы сделаем толщину шрифта «жирным».

Как сделать текст жирным в CSS

5

< HTML >
< Глава >

< Стиль тип = текст / CSS>

/ * Стили * /

P {
Цвет: красный;
    вес шрифта: полужирный;
    шрифт: 18px Arial, Helvetica, без засечек;
}

Стиль >
Глава >

< Body >

< p > Удобность, где вы можете узнать о веса шрифта p >

body >
html >

Взаимодействие этого кода HTML и CSS показано на следующем рисунке:

Результат на вашей веб-странице такой. Обратите внимание на текст BOLD .

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

Что нужно знать об использовании числовых значений

Хотя на самом деле существуют следующие числовые значения, которые можно использовать для определения «жирности» отображаемого текста: 100, 200, 300, 400, 500, 600, 700, 800 и 900, фактический результат будет определяется тем, какой шрифт вы используете в своем CSS.

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

Числовые значения следующие:

  • 100 - Тонкий
  • 200 - Дополнительный свет (ультра света)
  • 300 - Light
  • 400 - Normal
  • 500 - Medium
  • 600 - Semi Bold (Demi Bold)
  • 700 - Bold
  • 800 - Extra Жирный (сверхжирный)
  • 900 – Черный (жирный)

Вот несколько примеров различных значений толщины шрифта:

Примечание: Мы будем использовать семейство шрифтов : Helvetica, Arial, sans-serif; для этой демонстрации.

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

Сценарии вариантов использования

Когда дело доходит до стиля, бывают случаи, когда вы хотите либо выделить текст, либо сделать его менее заметным.

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

Например:

5

< HTML >
< Глава >

< Стиль тип = текст / CSS>

/ * Стили * /

P {
Цвет: серый;
    вес шрифта: 100;
    размер шрифта: 18 пикселей;
    семейство шрифтов: Arial, Helvetica, без засечек;
}

Стиль >
Глава >

< Body >

< p > Удобность, где вы можете узнать о веса шрифта P >

body >
html >

Веб-результат использования числового веса шрифта 100 будет выглядеть следующим образом:

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

Например:

5

< HTML >
< Глава >

< Стиль тип = текст / CSS>

/ * Стили * /

P {
Цвет: серый;
    вес шрифта: 900;
    размер шрифта: 18 пикселей;
    семейство шрифтов: Arial, Helvetica, без засечек;
}

Стиль >
Глава >

< Body >

< p > Удобность, где вы можете узнать о веса шрифта p >

body >
html >

Веб-результат использования числового веса шрифта 900 будет выглядеть следующим образом:

В мире создания веб-сайтов разные браузеры иногда могут давать разные результаты.

Давайте проверим это. Мы будем использовать следующий код для примера:




Udacity — это место, где вы можете узнать о толщине шрифта


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

Завершение:  (Куда дальше?)

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

Запишитесь на нашу программу «Введение в программирование Nanodegree» уже сегодня!

Начать обучение

Сделать шрифт полужирным в CSS: лучшие способы

В веб-разработке есть несколько способов сделать ваши шрифты полужирными. Но каковы наилучшие способы и какой код CSS следует использовать?

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

Но не волнуйтесь - к концу этого поста вы будете знать все, что вам нужно знать! Начнем...

Семантика полужирного текста HTML

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

При выделении шрифтов полужирным доступны два специальных элемента — и . У них немного другое применение:

  • используется для обозначения визуального стиля .Вы используете , чтобы привлечь внимание читателей к чему-то, что не имеет большего значения по сравнению с другим текстом вокруг него. Например, чтобы выделить названия продуктов или людей в статье. Другим примером могут быть те сайты, которые всегда выделяют первое предложение статьи жирным шрифтом — это было бы еще одним использованием для b .
  • используется для обозначения , означающего . Вы используете , чтобы выделить часть текста, которая имеет более высокую важность или срочность, чем остальная часть.Это может быть предупреждение или важная часть сообщения.

Вот пример. Возьмите следующее сообщение:

«Мы обнаружили две интересные цели на ледяном мире Хот: Хан Соло, которого разыскивают за контрабанду краденого и другие серьезные преступления, и Люка Скайуокера, который является приоритетной целью 1 Империи. Обе цели считается очень опасным — приближайтесь с особой осторожностью».

Имена «Хан Соло» и «Люк Скайуокер» были бы хорошими кандидатами на тег b .Любой штурмовик, просматривающий это сообщение, мог быстро и легко определить имена своих целей.

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

Ваша окончательная разметка может выглядеть так:

«Мы обнаружили две интересные цели на ледяном мире Хот: Хан Соло , разыскиваемый за контрабанду краденого и другие серьезные правонарушения, и Люк Скайуокер , являющийся приоритетной целью 1 Империи. . Обе цели считаются очень опасными — приближайтесь к ним с особой осторожностью. "

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

Почему используются эти два подхода к выделению шрифтов полужирным шрифтом?

Основная причина — доступность. Люди с нарушениями зрения часто используют средства чтения с экрана для чтения контента в Интернете.Если вы никогда не видели, чтобы кто-то использовал один из них, проверьте это:

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

Насколько я могу судить по моему Google Fu, скринридеры еще не делают это хорошо и последовательно. Многие из них просто читают разделы b и strong , как и любой другой текст.Тем не менее, технологии становятся все лучше и лучше.

Хорошо, теперь, когда вы знаете, какие теги использовать и как их лучше всего использовать, давайте перейдем к стороне уравнения CSS.

Выделение шрифтов полужирным шрифтом в CSS

Используемое вами свойство CSS — font-weight , которое принимает следующие значения:

  • полужирный
  • обычный
  • жирнее
  • зажигалка
  • <номер> - мы узнаем, какие номера можно использовать ниже

Значение по умолчанию — normal , что соответствует толщине шрифта текста, который вы сейчас читаете.Если вы хотите сделать свой шрифт полужирным в CSS, просто присвойте font-weight значение жирный шрифт :

.
  . keyword { 
вес шрифта: полужирный;
}

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

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

С большинством шрифтов у вас есть где-то между 1 и 9 различными весами для игры, которые помечены с шагом 100, от 100 до 900. Они соответствуют спецификациям OpenType, разработанным Microsoft и Adobe — вы можете быть знакомы с некоторыми из них:

См. перо на КодПене.

Как вы видите здесь, вес шрифта: 400; — то же, что и . Начертание шрифта: нормальное; и вес шрифта: 700; то же, что и , вес шрифта: полужирный; .

Обратите также внимание на строку @import вверху:

  @import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected];200;300;400;500;600;700;800;900&display=swap');  

Каждый из этих шрифтов с разным весом технически является отдельным шрифтом, и вам нужно будет импортировать их отдельно, либо из такой службы, как Google Fonts (как я сделал здесь), либо загрузив файлы шрифтов и предоставив их непосредственно из вашего собственный сайт.

Резервные варианты веса шрифта

Но вам может быть интересно, что произойдет, если вы установите font-weight на значение, которое вы не импортировали? Это сломает ваш сайт или выдаст ошибку?

Нет - браузер просто вернется к весу шрифта, который у вас есть.Вес многих шрифтов не охватывает весь диапазон от 100 до 900. Допустим, вы используете Arial, например, который по умолчанию имеет только 400 (обычный) и 700 (жирный). Вот что происходит с этими весами шрифта:

См. перо на КодПене.

Браузер просто переходит к ближайшему доступному весу.

Относительный вес шрифта в CSS

Помимо установки явного веса для шрифта, вы можете установить вес шрифта относительно родительского элемента:

  .жирнее { 
вес шрифта: жирнее;
}
.lighter {
вес шрифта: светлее;
}

При применении относительного веса учитываются только 4 значения: 100 , 400 , 700 и 900 . Вот что вы получите, если примените светлее и жирнее к разным родительским шрифтам :

Унаследовано вес шрифта значение вес шрифта: светлее возвращается. .. вес шрифта: жирнее возвращает...
100 100 400
200 100 400
300 100 400
400 100 700
500 100 700
600 400 900
700 400 900
800 700 900
900 700 900

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

См. перо на КодПене.

Что лучше — явный вес шрифта или относительный вес?

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

Некоторые считают, что смелее — более безопасный вариант.Например, представьте, что вес шрифта p установлен на 400 , а вес шрифта b установлен на font-weight: 700; . Что произойдет, если появится другой разработчик и изменит вес шрифта p , скажем, на 600 ? Теперь вы не увидите большой разницы между обычным текстом и текстом, выделенным жирным шрифтом. Однако, если вы установили b на font-weight: жирнее; , ваш полужирный текст автоматически увеличится до font-weight: 900; .

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

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

Переменный вес шрифта в CSS

Некоторые из вас могут подумать: "Эй, 9 разных начертаний мне недостаточно. Я хочу 1000!"

Что ж, тебе повезло, друг мой! Шрифты особого типа, известные как вариативные шрифты, на самом деле поддерживают насыщенность от 1 до 1000. Таким образом, вы можете сделать что-то вроде этого:

  вес шрифта: 371;  

Так как же они работают? Что ж, вариативные шрифты генерируются программно, аналогично изображениям SVG. Это означает, что их можно увеличивать или уменьшать по весу без потери качества — по крайней мере, в пределах диапазонов веса, поддерживаемых шрифтом.

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

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

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

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

Как лучше выбрать толщину шрифта?

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

Например, взгляните на этот пример с Монтсерратом (текст просто наполнитель от JeffSum, он ничего не значит). Здесь используются 400 и 700 , значения по умолчанию:

См. перо на КодПене.

Довольно стандартный полужирный текст. А теперь посмотрите, что произойдет, если мы изменим это значение на «100» и «800», более радикальное различие:

.

См. перо на КодПене.

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

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

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

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

Доступность

Как добросовестный разработчик, я уверен, что вы попытаетесь использовать теги b и strong , как описано выше, чтобы помочь людям с нарушениями зрения. Но вот еще что вам может помочь — опасайтесь очень тонких шрифтов.Начертание шрифта 100 и 200 может быть трудночитаемым для некоторых слабовидящих людей, и, вообще говоря, их лучше избегать. Если вы хотите их использовать, убедитесь, что у вас есть хотя бы сильный контраст между цветом шрифта и цветом фона (эта проверка контрастности может помочь вам в этом).

Теперь вы мастер жирных шрифтов CSS!

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

Тем не менее, бывают случаи, когда вашему клиенту нужен веб-сайт, профессионально отполированный, идеально функциональный и молниеносно быстрый (и, как обычно, они хотят его вчера! ). Для этого вы можете рассмотреть возможность использования fullpage.js.

fullPage — это библиотека JS, которая превращает ваш сайт в модный, полнофункциональный полностраничный сайт, который без проблем работает с библиотеками JS, такими как React, и CMS, такими как WordPress. Вы получаете целый ряд потрясающих эффектов (я большой поклонник эффекта воды), и его действительно легко настроить и начать работать. Посмотрите и узнайте, что вы думаете!

Об авторе:

Уоррен Дэвис — фронтенд-разработчик из Великобритании.
Больше информации от него можно найти на https://warrendavies.net

Как стилизовать текстовые элементы с помощью шрифта, размера и цвета в CSS

Автор выбрал фонд Diversity in Tech Fund для получения пожертвования в рамках программы Write for DOnations.

Введение

Каскадные таблицы стилей (CSS) — это язык, разработанный для двух дисциплин: программиста и дизайнера. Работа с текстом в Интернете — один из ярких примеров такой широкой доступности языка.При стилизации текста используются концепции из мира графического дизайна, но корректируются соглашения об именах для более широкой реализации.

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

Вы начнете обучение с написания структуры HTML, которая будет состоять из содержимого-заполнителя из Cupcake Ipsum. Вы будете работать с различными уровнями заголовков ( h2 - h6 ) и типами содержимого ( p , strong и em ), чтобы применить несколько связанных с текстом свойств CSS, включая font-family , размер шрифта и цвет .Вы также будете загружать пользовательские шрифты из Google Fonts, стороннего сервиса размещения шрифтов. На каждом этапе этого руководства будет представлена ​​новая концепция или набор свойств, применяемых к содержимому. К концу у вас будет веб-страница с пользовательским стилем.

Предпосылки

Настройка примера HTML

На этом первом шаге вы настроите HTML-код, который вы будете стилизовать в оставшейся части руководства. Цель HTML в этом руководстве — предоставить вам различные элементы и ситуации для практики стилей.

Откройте файл index.html с помощью текстового редактора, например nano, Vim или Visual Studio Code. Добавьте следующий стандартный HTML-код, чтобы дать файлу необходимый базовый код:

.

index.html

  

  <голова>
    
  
  <тело>
  

  

Элемент уже загружается в стилях .css , поэтому обязательно подготовьте и этот файл.

Далее вам нужно стилизовать содержимое. При создании текстовых стилей часто проекту нужны стили до того, как содержимое будет готово. В мире графического дизайна для этой цели используется плейсхолдер. Дизайнеры часто используют латинский текст в качестве заполнителя, известного как Lorem Ipsum. Есть много современных интерпретаций этого текста-заполнителя, в том числе Cupcake Ipsum. Это будет эталонная копия, используемая во всем HTML.

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

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

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

Чтобы создать этот иерархический контент, вы напишете различные заголовки и заполните каждый заголовок несколькими словами из Cupcake Ipsum в тегах в index.html . Вы будете следовать правильной семантике HTML , которая обеспечивает точное значение для браузера.

Чтобы иметь правильную семантику HTML:

  • На странице будет только один элемент

    . Обычно это заголовок.
  • Последующие уровни заголовков будут только на один меньший, равный или любой больший уровень.Например, единственным уровнем заголовка, который идет после

    , будет либо
    , либо другой

    , либо

    , но никогда
    или .
    .

С учетом правил семантики заголовков добавьте следующий выделенный HTML-код в index.html :

index.html

  ...
  <тело>
       

Чупа-чупс с сахарной сливой, шоколадный батончик, кекс, пончик

Тутси, рулет, овсяное печенье с макаронами

Желейные бобы, тирамису, выпечка, датский пончик

Лимонные леденцы с маршмеллоу

Пудинг с яблочным пирогом

Пряничный пряник
Морковный торт с начинкой из леденцов, мармеладных мишек
< h6>Лакричная конфета конфеты сладкая вата лакрица ...

Далее вам нужно заполнить пространство между заголовками. Это будут абзацы текста, обозначенные элементом

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

Добавьте выделенные части следующего блока кода. В этом руководстве будет использоваться этот формат для блоков кода:

.

index.html

  ...
  <тело>
     

Чупа-чупа с сахарной сливой, шоколадный батончик, кекс, пончик

Овсяное пирожное Тутси с макаронами

Конфеты брауни с мармеладом.Десертный пирог с плюшевыми мишками и датской сахарной ватой. Сахарная слива Я люблю печенье с фруктами. Желейные мишки мармелад маффин мармеладные мишки марципановый чизкейк пончик имбирный пряник Я люблю. Капкейк вафельный торт.

Жевательные бобы тирамису тесто датский пончик

Зефир с лимонными каплями

Я люблю зефирные конфеты. Кунжутные кексы по-датски. Шоколадный торт печенье желе-о тирамису халва брауни халва шоколадный шоколадный торт.Желе-о-карамель, мармелад, конфетный кекс, датский рулет, шоколадный батончик. Миндальное печенье я люблю маффины леденцы сладкие рулетики я люблю. Я люблю конфеты с круассаном и мороженым с зефиром. Я люблю мишек мармелад.

Топпинг для пудинга с яблочным пирогом

Пирог яблочный пирог я люблю мармелад бисквит я люблю. Шоколадный торт выпечка тирамису суфле порошковая карамель Я люблю мороженое. Драже с лакрицей, желейными ирисками, желейными бобами. Суфле из леденцов с кунжутом. Бисквит, пончик, медвежий коготь, мармелад, халва, выпечка, миндальное печенье, лимонные капли.Тутси рулет драже, печенье, конфеты, суфле, драже, кекс, лакрица.

Датские пряники

Порошковое драже с кунжутными леденцами и желейными карамельными палочками. Вафля имбирная халва чизкейк. Вафельный рулет, который я люблю, я люблю. Торт Тоффи, который я люблю. Сахарная вата сладкая вата желейные бобы Я люблю конфеты ириски. Чупа-чупс чупа-чупс карамель мороженое халва конфеты шоколадный торт. Маршмеллоу, морковный торт, мармеладные бобы.

Морковный торт с леденцами и мармеладными мишками

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

Лакричная конфета сладкая вата сладкая лакрица

Кекс пончик с начинкой чупа чупс халва чупа чупс. Macaroon tootsie roll кекс карамель шоколадный кекс имбирный мармелад желейный. Тирамису Я люблю зефир желе-о Я люблю желейные бобы конфеты мармелад мишки.

...

Наконец, добавьте , и комбинацию двух элементов вместе. Это предоставит примеры фраз, которые выделены в содержании:

индекс

.HTML

  ...
     

Овсяное пирожное Тутси с макаронами

Конфеты с мармеладом. Десертный пирог с плюшевыми мишками и датской сахарной ватой. Сахарная слива Я люблю кексы с фруктами . Желейные мишки мармелад маффин мармеладные мишки марципановый чизкейк пончик имбирный пряник Я люблю. Кекс вафельный торт.

Датский пончик с драже и тирамису

Зефир с лимонными каплями

Я люблю зефирные конфеты. Снэки с кунжутом Маффин по-датски. Шоколадный торт печенье желе-о тирамису халва брауни халва шоколадный шоколадный торт. Желе-о-карамель, мармелад, конфетный кекс, датский рулет, шоколадный батончик. Миндальное печенье я люблю маффины леденцы сладкие рулетики я люблю. Я люблю конфеты с круассаном и мороженым с зефиром. Я люблю мармеладных мишек.

Посыпка для пудинга с яблочным пирогом

Пирог яблочный пирог я люблю мармелад бисквит я люблю. Шоколадный торт тирамису суфле порошковая карамель Я люблю мороженое.Драже с лакрицей, желейными ирисками, желейными бобами. Суфле из леденцов с кунжутом. Бисквит, пончик, медвежий коготь, мармелад, халва, выпечка, миндальное печенье, лимонные капли. Тутси рулет, драже, печенье, конфеты, суфле, драже, кекс, лакрица.

Датские пряники

Порошковое драже с кунжутными леденцами и желе. Вафля имбирная халва чизкейк. Вафельный рулет Я люблю Я люблю. Торт Тоффи, который я люблю. Сахарная вата сладкая вата желейные бобы Я люблю конфеты ириски.Чупа-чупс чупа-чупс карамель мороженое халва конфеты шоколадный торт. Маршмеллоу, морковный торт, желейные бобы.

Морковный пирог с леденцами и мармеладными мишками

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

Лакричная конфета конфеты сладкая вата лакрица

Топпинг для кексов с пончиками чупа-чупс халва чупа-чупс. Macaroon tootsie roll кекс карамель шоколадный кекс имбирный мармелад желейный.Тирамису Я люблю зефир желе-о Я люблю желейные бобы конфеты мармелад мишки.

...

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

Размер текста варьируется во всех элементах, причем стили по умолчанию

и
меньше, чем текст

.

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

Использование семейства шрифтов

Свойство

Далее вы будете работать со свойством CSS font-family и загружать внешний файл шрифта из службы Google Fonts. Имя этого свойства происходит от термина типографики, описывающего набор шрифтов и варианты этого шрифта, включая жирный шрифт и курсив.Шрифт может иметь многие из этих вариаций, но все они могут быть частью одного и того же font-family , с этими вариациями, вызываемыми свойствами font-weight и font-style .

Чтобы начать работу с семейством шрифтов , полезно понять особенности его значений. Значением свойства font-family является список шрифтов, называемый стеком шрифтов. Стек шрифтов работает как резервная система. Рассмотрим следующее значение свойства font-family :

  семейство шрифтов:  "Helvetica Neue", Helvetica, Arial, без засечек;   

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

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

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

.

стилей.css

  корпус {
  семейство шрифтов: "Avenir Next", Calibri, Verdana, без засечек;
}
  

В этом коде вы начинаете с селектора типа body со свойством font-family .Затем для стека шрифтов вы начинаете с «Avenir Next» , который будет доступен в браузерах iOS и macOS. Avenir Next заключен в кавычки, потому что название шрифта состоит из двух слов. Следующий шрифт — Calibri для браузеров Windows. Обязательно ставьте запятую между каждым объявлением шрифта. Чтобы обеспечить более общий резервный вариант шрифта, вы затем используете Verdana , который был широко доступен на компьютерах с начала 2000-х годов. Наконец, поскольку все эти шрифты классифицируются как шрифты без засечек, вы добавляете браузер по умолчанию без засечек в качестве последнего варианта шрифта в стеке шрифтов.

Сохраните styles.css , затем откройте index.html в браузере. Вы найдете новый шрифт вместо шрифта браузера по умолчанию для содержимого. Если вы используете операционную систему Apple, Avenir Next будет отображаться в браузере. Если вы работаете в Windows, вместо этого будет отображаться Calibri. На следующем изображении показано, как этот стек шрифтов выглядит в MacOS:

.

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

Загрузка пользовательских шрифтов с помощью Google Fonts

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

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

Чтобы начать, откройте fonts.google.com в браузере.

В Google Fonts можно выбирать из множества различных шрифтов. В этом уроке будут использоваться два: Public Sans и Quicksand.

В поле поиска Google Fonts введите Public Sans . Когда карточка шрифта появляется в результатах поиска, отображается предварительный просмотр шрифта. Нажмите на карточку, чтобы перейти на страницу со шрифтом:

.

На странице шрифта Public Sans будут перечислены все варианты шрифта.Они известны как веса , которые варьируются от 100 до 900. Для целей этого руководства найдите Regular (400) и Bold (700) стили и нажмите кнопку + Select this style рядом каждому варианту стиля, а также их курсиву.

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

Выберите метод для загрузки шрифтов в браузере и копирования предоставленного HTML.Откройте index.html и добавьте код в элемент после загрузки styles. css . Держите Google Fonts открытым, так как вы вернетесь к нему еще пару раз:

index.html

  ...
<голова>

  

...
  

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

Вернитесь в Google Fonts, чтобы найти правило CSS, которое загружает Public Sans. Google Fonts предоставляет стек шрифтов Public Sans и шрифт без засечек по умолчанию в браузере с семейством шрифтов : «Public Sans», без засечек; . Поскольку у вас уже есть стек шрифтов, настроенный с резервными шрифтами, все, что вам нужно взять из примера Google Fonts, — это имя для ссылки на Public Sans.

Используя существующий стек шрифтов в styles.css , замените Avenir Next и Calibri на Public Sans :

стилей.css

  корпус {
  семейство шрифтов:  "Public Sans" , Verdana, без засечек;
}
  

Теперь, когда был объявлен базовый стек шрифтов, все шрифты на странице теперь являются Public Sans.

Один из распространенных приемов дизайна, позволяющий привлечь больше внимания к заголовкам, заключается в использовании для заголовков другого шрифта, чем для основного текста.Чтобы применить это к своему собственному HTML, вернитесь в Google Fonts и выполните поиск «Quicksand». Это будет заголовок или шрифт display для элементов от

до
на странице.

После того, как вы нашли Quicksand, выберите карту шрифтов и добавьте Semi-bold (600) и Bold (700) веса к выбранным шрифтам вместе с Public Sans. Google Fonts предоставит новый URL-адрес для загрузки всех выбранных шрифтов и вариантов.Замените предыдущее значение href на новую ссылку в файле index.html :

.

index.html

  ...
<голова>

  " rel="таблица стилей">

...
  

Теперь, когда Quicksand настроен на загрузку в браузере, вам нужно применить его к тегам заголовков.Вы добьетесь этого, добавив разделенный запятыми список селекторов CSS, называемый групповым селектором , в файл styles.css . В этом случае используйте стек шрифтов, предоставленный Google Fonts с Quicksand, а затем шрифт браузера по умолчанию без засечек :

стилей.css

  ...
  h2, h3, h4, h5, h5, h6 {   семейство шрифтов: "Quicksand", без засечек;   }   

Сохраните изменения в стилях . css и вернитесь в браузер, чтобы перезагрузить index.html . Не стесняйтесь закрывать Google Fonts на этом этапе. Когда браузер загрузится, вы увидите два отображаемых шрифта. Quicksand теперь присутствует во всех заголовках, а Public Sans — во всем остальном контенте, включая контент, выделенный полужирным шрифтом и курсивом.

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

Использование

font-weight и font-style Свойства

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

Теперь, когда вы загружаете пользовательские шрифты из Google Fonts, вы можете приступить к точной настройке характеристик текста.Начиная со свойства font-weight , вы можете изменить толщину или толщину отображаемого шрифта. Свойство font-weight имеет два общих значения: обычный и полужирный . Значение normal — это значение по умолчанию font-weight для большей части текста в браузере. Значение жирный шрифт — это значение по умолчанию вес шрифта для заголовков и элементов. Но для этого урока вам нужно будет использовать числовые значения вместо имен обычных и полужирных значений .

Числовой font-weight Значения зависят от загружаемого шрифта. Когда вы добавили шрифт Public Sans из Google Fonts, вы выбрали значения Regular (400) и Bold (700). Числа в скобках совпадают со значениями, необходимыми для ссылки и загрузки этого шрифта. Кроме того, значение font-weight 400 является числовым эквивалентом normal , например, 700 является числовым эквивалентом жирного шрифта . Текст, который использует Public Sans, то есть все, кроме заголовков, будет автоматически использовать эти веса.

В качестве альтернативы, выбор шрифта Quicksand включал полужирный (600) и жирный (700) шрифты. Значение 600 не имеет числового аналога и должно быть определено с помощью числового значения.

Вы начнете с установки шрифта для всех заголовков на 600 полужирный вариант Quicksand. В файле styles.css найдите селектор группы со всеми значениями заголовков и добавьте font-weight: 600; объявление блока селектора:

стилей.CSS

  ...
h2, h3, h4, h5, h5, h6 {
семейство шрифтов: "Quicksand", без засечек;
 вес шрифта: 600;  }
  

После внесения этого изменения сохраните styles. css и перезагрузите index.html в браузере. Вы увидите небольшое истончение заголовков, когда они изменятся со значения 700 Quicksand на значение 600 .

Теперь, когда вы установили для всех элементов заголовка использование веса Quicksand 600 , все еще есть места для использования варианта шрифта 700 .Для начала создайте селектор типа h4 в файле styles.css и добавьте font-weight: 700; в блоке селектора:

стилей.css

  ...
  h4 {   вес шрифта: 700;   }   

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

Сохраните изменения в файле styles. css , а затем создайте новый селектор, предназначенный для текста, заключенного в теги и . В случае со стилями, написанными до сих пор, этот тип текста будет выделен полужирным курсивом в варианте Public Sans. Вместо этого установите стили для использования набора шрифтов Quicksand.

Так как HTML для получения полужирного курсивного стиля ... и ... , вам нужно будет создать селектор группы комбинаторов в файле styles.css , а затем применить свойство font-family с "Quicksand", без засечек как значение:

стилей.css

  ...
  strong em,   em strong {   семейство шрифтов: "Quicksand", без засечек;   }   

После внесения этого дополнения в файл styles.css сохраните его, а затем перезагрузите индекс . html в вашем браузере. Текст, который был выделен жирным курсивом, теперь использует Quicksand и выделен курсивом, хотя Google Fonts не предоставляет курсивную версию шрифта. Это называется faux italic , когда браузер понимает, что это содержимое должно быть выделено курсивом по умолчанию, но, поскольку вариант курсива не определен, вместо этого он искусственно наклоняет текст.

Свойство для обработки выделения текста курсивом: font-style . Варианты значений для свойства font-style : normal и italic .Вместо использования полужирного шрифта измените стили для этого селектора, чтобы он не выделялся курсивом. Добавьте в селектор группы strong em, em strong в файле styles.css свойство font-style со значением normal :

.

стилей.css

  ...
сильная эм,
я сильный {
семейство шрифтов: "Quicksand", без засечек;
 стиль шрифта: нормальный;  }
  

Это изменит экземпляр полужирного курсивного текста, чтобы он был только жирным шрифтом Quicksand.

Сохраните изменения в styles.css и перезагрузите index.html в браузере, чтобы увидеть изменения:

В этом разделе вы использовали свойства font-weight и font-style для применения вариантов шрифта Quicksand, загруженного из Google Fonts. Далее вы будете использовать свойство font-size для создания более крупного и разборчивого текста с более четкой иерархией заголовков.

Использование свойства

размера шрифта

В этом разделе вы будете использовать свойство font-size для применения разных размеров шрифта к содержимому на странице.Размер текста является важным фактором при передаче информации. Текст хорошего размера легче читать, а заголовки соответствующего размера помогают передать иерархию для облегчения просмотра информации. Вы измените размер шрифта всех элементов, которые вы создали в index.html , чтобы создать более читабельный документ.

Начните с установки размера шрифта по умолчанию для элемента body . Браузер по умолчанию размер шрифта равен 16px , но для повышения разборчивости многих шрифтов может быть полезно сделать их немного больше.Откройте файл styles.css и добавьте размер шрифта : 18px; к корпус элемент:

стилей.css

  корпус {
семейство шрифтов: "Public Sans", Verdana, без засечек;
 размер шрифта: 18px;  }
...
  

Откройте index.html в браузере или обновите страницу. Изменение font-size в элементе body изменило все шрифты на странице, увеличив их размер.

Размер шрифта по умолчанию для элементов зависит от размера родительского элемента, в данном случае элемента , с использованием процентного значения размера шрифта.Используя формулу (целевой/базовый) * 100% , вы получите процентное значение относительно базового размера шрифта, установленного в элементе .

Чтобы попробовать эту формулу, вы будете работать с установкой целевого размера шрифта для элемента

равным 45px . Используя формулу, целевой размер 45px и базовый размер 18px , поэтому формула для этого будет (45/18) * 100% , что дает 250% .Это означает, что предполагаемый размер для

будет в 2,5 раза больше размера базового font-size .

Вернуть вам файл styles.css и добавить селектор элементов для h2 и добавить font-size: 250%; свойство и значение для установки размера шрифта:

стилей.css

  ...
  h2 {   размер шрифта: 250%;   } 
...
  

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

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

Откройте файл styles.css и начните с добавления комментария после свойства h2 font-size , объясняющего отображаемый размер. Тогда для каждого заголовка примените формулу, так что H3 имеет размер шрифта , эквивалентный 36PX , H4 , равный 32PX , H5 26PX , H5 до 22px и, наконец, h6 до базового размера 18px .Размер по умолчанию элемента

меньше базового размера, поэтому установка его на 100% гарантирует, что он не опустится ниже базового значения:

стилей.css

  ...
ч2 {
размер шрифта: 250%;  /* 45 пикселей */  }

  h3 {   размер шрифта: 200%; /* 36px */   }   h4 {   размер шрифта: 177,78%; /* 32px */   }   h5 {   размер шрифта: 162,5%; /* 26px */   }   h5 {   размер шрифта: 122%; /* 22px */   }   h6 {   размер шрифта: 100%; /* 18 пикселей */   } 
. ..
  

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

.

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

Использование свойства цвета

для различения текста

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

Как и в случае с font-size , вы установите цвет по умолчанию для всего документа. Это повлияет на весь контент на странице, так как цвет является унаследованным значением для большинства элементов.Важно помнить о цветовом контрасте, поскольку он помогает удобочитаемости, особенно когда речь идет о том, чтобы сделать веб-сайт доступным для всех уровней зрения. Так как фоновый цвет останется белым по умолчанию, использование жирных темных цветов является хорошим ориентиром. Если вы хотите узнать больше о дизайне с доступным цветовым контрастом, посмотрите этот короткий видеоролик на эту тему.

Чтобы начать использовать цвет , вернитесь к файлу styles.css в текстовом редакторе. Как и в случае с разделом font-size , найдите селектор body и добавьте свойство color .Цвет текста по умолчанию в большинстве браузеров — черный. Для доступного цветового контраста важно, чтобы основной цвет был темным на светлом фоне. Используйте именованный цвет DarkSlateGray , который здесь только для верблюжьего регистра для разборчивости, но может быть весь строчный, если хотите:

стилей.css

  корпус {
семейство шрифтов: "Public Sans", Verdana, без засечек;
размер шрифта: 18 пикселей;
 цвет: DarkSlateGray;  }
...
  

Сохраните файл styles.css и обновите индекс .html в вашем браузере. Цвет содержимого изменится с черного на темно-сине-зеленый:

.

Теперь, когда основной цвет установлен, вы можете начать использовать другие цвета, чтобы создать более визуальную иерархию. Начните с селектора h2 в файле styles.css и добавьте свойство color со значением Indigo :

.

стилей.css

  ...
ч2 {
размер шрифта: 250%; /* 45 пикселей */
 цвет: индиго;  }
... 

Сохраните файл styles.css , вернитесь в браузер и обновите index.html . Текст

теперь имеет темно-фиолетовый цвет вместо темно-сине-зеленого цвета по умолчанию:

.

Далее вы примените цвета к другим заголовкам. Quicksand — это забавный округлый шрифт, и вы используете причудливый образец содержимого Cupcake Ipsum, поэтому создайте яркую и живую цветовую схему, используя разные цвета для каждого заголовка. Вернитесь к стилям .css и для каждого из селекторов заголовков добавьте свойство color и значение цвета. Для элемента H3 Использование Mediclevioletred , для H4 Использование H4 , для H5 , для H5 , для H5 Использование H5 Использование Chrips , затем, наконец, для H6 Использование Глубокий небесно-голубой :

стилей.css

  ...
h3 {
размер шрифта: 200%; /* 36 пикселей */
 цвет: MediumVioletRed;  }

h4 {
Размер шрифта: 177.78%; /* 32 пикселя */
 цвет: зеленый лайм;  }

h5 {
размер шрифта: 162,5%; /* 26 пикселей */
 цвет: Шоколад;  }

h5 {
размер шрифта: 122%; /* 22 пикселя */
 цвет: малиновый;  }

h6 {
размер шрифта: 100%; /* 18 пикселей */
 цвет: DeepSkyBlue;  }
...
  

После добавления свойств цвета к заголовкам сохраните styles.css и вернитесь в браузер, чтобы обновить index.html . Ваш контент теперь полон цвета:

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

Заключение

Работа с текстом является основной частью написания CSS для Интернета. Текст передает смысл не только тем, что он говорит, но и тем, как он выглядит. Используя инструменты, которые вы изучили со свойствами font-family , font-weight , font-style , font-size и color , вы можете манипулировать текстом, чтобы обеспечить значимый контекст для вашего веб-сайта. .Эти свойства не ограничиваются заголовками, рассматриваемыми в этой статье: их можно использовать с любым элементом, содержащим текст.

Если вы хотите прочитать больше руководств по CSS, посетите нашу страницу темы CSS.

.
Comments