Как установить нормальный и жирный шрифт независимо с помощью CSS?
У меня есть шрифт трех начертаний: легкий, обычный, жирный. Я хотел бы использовать облегченный шрифт для обычного текста и жирный шрифт для жирного текста.
Использование font-weight: lighter в этом случае не работает, потому что оно приводит к тому, что жирный текст становится обычным, тем самым нарушая функциональность полужирного шрифта.
Каков правильный CSS для достижения этой цели?
<html>
<style>
p {
font-weight: lighter;
}
</style>
<body>
<p>Light weight, <b>bold weight</b></p>
</body>
</html>Если я что-то не упустил, приведенный выше код приводит к смещению всего текста к следующему более легкому шрифту. В моем случае, когда имеется только три различных толщины шрифта, это означает, что жирный шрифт использует обычную толщину, а обычный текст — облегченную.
b имеет font-weight: bold; по умолчанию, поэтому вес шрифта, который вы применяете к p, не имеет большого значения (если только у вас нет дополнительного кода, который вы должны нам показать)
Интересно, но это не то поведение, которое я наблюдаю. Это мой полный код, и я не получаю жирного текста. Удаление CSS восстанавливает жирный шрифт, но не позволяет использовать облегченный шрифт для обычного текста.
@telenachos — Это сложно. Браузеры делают разные вещи. В некоторых браузерах элементы b по умолчанию имеют значение font-weight:bolder, другие — font-weight:bold. В вашем примере в первых браузерах вес шрифта, используемый элементом b, уменьшается до нормального, в последних браузерах он остается жирным.
@PoulBak нет наследования, когда вы устанавливаете толщину шрифта p, а для b установлен шрифт по умолчанию. Всегда будет учитываться тот, что на b (определяется браузером).
@PoulBak i.sstatic.net/pB6teObf.png Я по-прежнему настаиваю на том, что здесь нет наследования, потому что к элементу b применяется шрифт по умолчанию. Проверьте себя и проверьте код, чтобы увидеть «нет наследования».
@TemaniAfif: Извините, вы правы (почему я просто не запустил фрагмент кода)?
@TemaniAfif — здесь определенно сложно. В спецификации CSS Fonts Level 4 указано font-weight:bolder — «Вычисляемый вес рассчитывается на основе унаследованного значения веса шрифта с использованием приведенной ниже диаграммы.. Firefox по умолчанию устанавливает для элементов b значение font-weight:bolder и спецификацию HTML. В разделе рендеринга говорится, что это ожидаемое поведение, хотя Chromium не соответствует требованиям. Лично я считаю, что использование «унаследованного» здесь неудачно. Это не то, что мы обычно называем наследованием.
Ответы 2
CSS:
p {font-weight: lighter;}
b, strong {font-weight: bold;}
Вы также можете переназначить свои шрифты на желаемую толщину шрифта по умолчанию с помощью пользовательских правил @font-face:
/* map light (300) to regular (400) */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');
}
/* heavy (800) to bold (700) */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 800;
src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2) format('woff2');
}
body{
font-family: 'Poppins';
}<p>Light weight, <b>bold weight</b></p>
<p>Light weight, <strong>bold weight</strong></p>В приведенном выше примере мы сопоставляем фактический Poppins Light/300 с обычным/400. Вы можете расширить эту концепцию, например, настроить жирность по умолчанию для (по умолчанию) выделенных жирным шрифтом элементов, таких как <strong>, или заголовков, таких как <h1-5> (например, если вы считаете, что жирный шрифт по умолчанию слишком толстый или слишком тонкий).
Кроме того, я рекомендую избегать относительных начертаний шрифтов, таких как lighter или bolder, поскольку они не очень интуитивно понятны (см. документацию mdn: «Значение относительной толщины» ). Похожий пост «Выделение текста жирным шрифтом не работает на разных устройствах»
он заставляет жирный текст иметь обычный вес, тем самым нарушая функциональность жирного шрифта --> нет, это не так