Можно с помощью CSS изменить стиль только цифровых символов?

Можно с помощью CSS в тексте изменить стиль только цифровых символов?

UPD: Уточнение. Нужно поменять задать другой шрифт и размер font-size для цифровых символов.
  • Вопрос задан
  • 134 просмотра
Пригласить эксперта
Ответы на вопрос 3
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Ответ написан
NikitaNike
@NikitaNike
Frontend developer
Можно использовать свойство unicode-range, но тут есть нюансы.
Во-первых, это свойство можно использовать только в @font-face.
Во-вторых, список свойств ограничен, все свойства привожу ниже:
@font-face {
@font-face {
  font-family: "FontName";
  src: url() format(" ");
  font-variant: ;
  font-stretch: ;
  font-weight: ;
  font-style: ;
  unicode-range: U+30-39;
}


Либо добавлять каждое число в тег с определенным классом и уже для класса писать стили.

Но если вам нужно изменить цифры в списке, то это делается по-другому.
Ответ написан
@ludr
Попробуйте из кастомного шрифта убрать диапазон с цифрами и тогда, возможно, браузер подтянет маюскульные(те, которые не пляшут по базовой линии) из дефолтного шрифта. Возможно это сработает, но я так не делал и только предполагаю, что когда браузер не сможет найти «unicode-range: U+30-39;» в кастомном шрифте, он подтянет цифры из следующего шрифта в font-face или дефолтный шрифт заданного семейства.
В таком способе минусом могут быть ограничения по внешнему виду(шрифты должны быть похожи), а плюсом, то что не нужно грузить два шрифта. Если не сработает, то можно попробовать вот так:

@font-face {
  font-family: foo;
  src: url(...);
}
@font-face {
  font-family: foo;
  src: local("Arial");
  unicode-range: U+0030-0039;
}

— в случае замены цифр из дефолтного шрифта, либо так

@font-face {
  font-family: foo;
  src: url(...);
}
@font-face {
  font-family: foo;
  src: другой url(...);
  unicode-range: U+0030-0039;
}

— в случае двух кастомных шрифтов.

P.S. Если попробуете, то отпишитесь о результатах, если не трудно.
P.P.S. А вообще лучше подберите максимально похожий шрифт с маюскульными цифрами)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы