Выделение текста жирным шрифтом не работает на разных устройствах

Влияет ли выделение текста жирным шрифтом на тип экрана?

Это JSX в реакции:

function App() {
  return (
    // Problem Here
    <b className = "info-text">Info:{" "}</b>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

.info-text {
  font-size: 14px;
  font-weight: bolder;
  line-height: 24px;
  color: #15366D;
}

<script src = "https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script>

<div id = "root"></div>

Зависит от того, поддерживает ли это семейство шрифтов.

— 09.04.2024 08:33

жирнее относительно - так каков здесь полный контекст - какова толщина шрифта родительского элемента?

— 09.04.2024 14:35

css reactjs

09.04.2024 08:31

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

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

— 09.04.2024 14:38

09.04.2024 08:35

Я думаю, вам следует использовать тег <span>, а не тег <b>.

См. этот пример:

.info-text {
  font-size: 14px;
  font-weight: bolder;
  line-height: 24px;
  color: #f00;
}

<span class = "info-text">
  Info
</span>

Примечание. Преобразуйте это в JSX и используйте className вместо class.

Здесь вполне может понадобиться тег b. Сегодня это не означает «придать смелости» — это означает «привлечь внимание». Кроме того, почему шрифт был изменен на жирный, когда ОП хотел сделать его более жирным, а это другое дело.

— 09.04.2024 14:37

09.04.2024 08:44

Ответ принят как подходящий

Из документации mdn: «Значение относительных весов»

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

Другими словами:
если ваше тело настроено на font-weight: 400 элемент с font-weight:lighter отобразит вес 100, а не 300, как можно было бы ожидать.

Это также относится к шрифтам, поддерживающим широкий диапазон насыщенности (например, переменные шрифты).

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notoserif/v23/ga6Iaw1J5X9T9RW6j9bNfFcWaA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body{
  font-family:'Noto Serif';
  font-weight:400
}


.lighter{
  font-weight:lighter
}

.light{
  font-weight:light
}

.bolder{
 font-weight:bolder
}

.bold{
 font-weight:bold
}

.info-text {
  font-size: 32px;
  line-height: 24px;
  color: #15366D;
}

<h3>Implicit/relative weights</h3>
<p class = "info-text lighter">p-lighter </p>
<b class = "info-text bolder">b-bolder</b>

<h3>Explicit weights</h3>
<p class = "info-text light">p-light </p>
<b class = "info-text bold">b-bold</b>

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