У меня есть шрифт трех начертаний: легкий, обычный, жирный. Я хотел бы использовать облегченный шрифт для обычного текста и жирный шрифт для жирного текста.
Использование font-weight: lighter в этом случае не работает, потому что оно приводит к тому, что жирный текст становится обычным, тем самым нарушая функциональность полужирного шрифта.
Каков правильный CSS для достижения этой цели?
<html>
<style>
p {
font-weight: lighter;
}
</style>
<body>
<p>Light weight, <b>bold weight</b></p>
</body>
</html>🤔 А знаете ли вы, что...
CSS позволяет задавать стили для разных состояний печати, такие как ландшафт или портрет.
Вы также можете переназначить свои шрифты на желаемую толщину шрифта по умолчанию с помощью пользовательских правил @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: «Значение относительной толщины» ). Похожий пост «Выделение текста жирным шрифтом не работает на разных устройствах»