CSS: Насыщенность шрифта
В курсе по HTML для изменения насыщенности шрифта был рассмотрен тег <b>, аналогом которого является свойство font-weight. Свойство более гибкое, чем стандартные стили тега <b>, так как можно сделать не только более насыщенным, но и наоборот — сделать его тонким.
Есть два самых распространённых значения свойства font-weight:
bold— насыщенный шрифт. Внешне текст будет выглядеть так же, как и при использовании тега<strong>или<b>normal— значение по умолчанию. Полезное значение, если весь текст имеет нестандартную насыщенность, но какой-то участок необходимо сделать стандартным по насыщенности
<p class="bold">Text with bold typeface</p>.bold {
font-weight: bold;
}
Но это не все значения, которые может принимать свойство. Помимо словесного описания bold и normal существуют числовые:
100200300400— соответствует значениюnormal500600700— соответствует значениюbold800900
Хоть числовых значений и много, но здесь всё зависит от начертаний шрифта, а точнее от того, есть ли у него символы для каждого типа насыщенности. Большинство шрифтов поддерживают только значения normal и bold и если указано иное, то браузер сам выберет какую насыщенность подставить взамен. Чаще всего все значения выше 500 будут интерпретированы как bold
Задание
Добавьте в редактор параграф с классом weight и установите насыщенность bold . Стили добавьте в тег <style>
Полезное
Если у шрифта есть только нормальная насыщенность, то при установке значения
boldбраузер автоматически сделает символы насыщенными. Это может выглядеть не так, как задумывалось разработчиками шрифта, поэтому следите, чтобы были подключены все нужные вариации шрифта
CSS: Насыщенность шрифта
В курсе по HTML для изменения насыщенности шрифта был рассмотрен тег <b>, аналогом которого является свойство font-weight. Свойство более гибкое, чем стандартные стили тега <b>, так как можно сделать не только более насыщенным, но и наоборот — сделать его тонким.
Есть два самых распространённых значения свойства font-weight:
bold— насыщенный шрифт. Внешне текст будет выглядеть так же, как и при использовании тега<strong>или<b>normal— значение по умолчанию. Полезное значение, если весь текст имеет нестандартную насыщенность, но какой-то участок необходимо сделать стандартным по насыщенности
<p class="bold">Text with bold typeface</p>.bold {
font-weight: bold;
}
Но это не все значения, которые может принимать свойство. Помимо словесного описания bold и normal существуют числовые:
100200300400— соответствует значениюnormal500600700— соответствует значениюbold800900
Хоть числовых значений и много, но здесь всё зависит от начертаний шрифта, а точнее от того, есть ли у него символы для каждого типа насыщенности. Большинство шрифтов поддерживают только значения normal и bold и если указано иное, то браузер сам выберет какую насыщенность подставить взамен. Чаще всего все значения выше 500 будут интерпретированы как bold
Задание
Добавьте в редактор параграф с классом weight и установите насыщенность bold . Стили добавьте в тег <style>
Полезное
Если у шрифта есть только нормальная насыщенность, то при установке значения
boldбраузер автоматически сделает символы насыщенными. Это может выглядеть не так, как задумывалось разработчиками шрифта, поэтому следите, чтобы были подключены все нужные вариации шрифта
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, expect }) => {
const element = query(document, 'p');
expect(element).to.have.class('weight');
const style = getComputedStyle(element);
expect(style).to.have.property('font-weight', 'bold');
});Решение учителя откроется через:
20:00
