Можно применить стили только к цифрам, без оборачивания цифр в тэг?

Question

[Михаил Чеков]

Здравствуйте!
В react приложении передается строка из объекта

const obj = { data: ' 100 порций 5 мышей в подарок заказчик доволен' }

и выводится в дочернем компоненте.
Задача – сделать цифры жирными, а текст – оставить обычным.
Можем ли мы применить стили только к цифрам, без оборачивания цифры в тэг?
Или можно как-то так строку задать в объекте? =)

const obj = { data: '<b>100</b> порций, <b>5</b> мышей в подарок заказчик доволен' }

Answer 1

[Ankhena]

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

@font-face {
    font-family: 'drevodel_regular';
         url('fonts/drevodel_regular.woff2') format('woff2'),
         url('fonts/drevodel_regular.woff') format('woff'),
    font-weight: normal;
    font-style: normal;
    unicode-range: U+30-39;
}

Не работает с шрифтами подключенными через Google fonts, необходимо локальное подключение.

Comments

[Михаил Чеков]

Анна, большое спасибо за ответ!
Я не очень хорошо дружу с css, хотел уточнить, как сделать такое разделение – т.е. через 2 конструкции font-face мы шрифты указываем c одинаковым font-family, а там где цифры браузер подставит font-weight: bold ?
Для scss это будет что-то вроде?

@font-face{
    font-family: "Trebuchet MS";
    src : url("../fonts/Trebushet-ms.ttf");
}

@font-face {
    font-family: 'Trebuchet MS';
    src: url("../fonts/trebuc.ttf2") format('ttf2');
    font-weight: bold;
    font-style: normal;
    unicode-range: U+30-39;
}

[Ankhena]

chekoff, не.
У жирного шрифта должен стоять normal.
Только формат ttf устарел, для современных браузеров нужны woff2 и woff.

Но я бы оборачивала в span'ы.

[Михаил Чеков]

Ура, заработало! Спасибо большое за помощь =)

Answer 2

[AlexlMl]

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