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

Question

[Евгений Обыкновенный]

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

UPD: Уточнение. Нужно поменять задать другой шрифт и размер font-size для цифровых символов.

Answer 1

[Сергей Горячев]

Comments

[Евгений Обыкновенный]

По-моему, у вас весь текст получается одним шрифтом.

[Сергей Горячев]

Евгений Обыкновенный, у меня нет.

[Ankhena]

Сергей Горячев, у меня одним шрифтом вся фраза

[Сергей Горячев]

Ankhena, это разные шрифты, но сказать, почему у тебя не подключился Робото, не могу, но цифры отображаются правильно ZCool'ом.

[Ankhena]

Сергей Горячев, я вчера даже с Ариалом пробовала

[Сергей Горячев]

Ankhena, только сейчас увидел, что у меня закомментирован unicode-range, но странно что у меня работает...

[Сергей Горячев]

Ankhena, ну, значит решение задачи только одно, обернуть на JS все цифры в спан и им прописывать отдельный шрифт. С этим заморачиваться не буду.

[Ankhena]

Сергей Горячев,

закомментирован unicode-range,

я, конечно, раскомментировала

Но очень интересно, почему у вас работает, а у меня нет.

И еще, а если из шрифта удалить все символы, кроме цифр, то применится как надо?

[Сергей Горячев]

Ankhena, по идее, будет тоже самое, так как unicode-range и делает выборку нужного сегмента шрифта, удаляя ненужное.
Родилась одна догадка, попробую допилить.

[Сергей Горячев]

Ankhena, что тут img.webirus.ru/t ?

[Ankhena]

Сергей Горячев, тут круть!
Только при локальном подключении работает?

[Сергей Горячев]

Ankhena, знаичт с гуглофонтом не работает, ему нужен

@font-face {
    font-family: Georgia;
    src: url('fonts/fontin_sans_regular.eot');
    src: url('fonts/fontin_sans_regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontin_sans_regular.woff2') format('woff2'),
         url('fonts/fontin_sans_regular.woff') format('woff'),
         url('fonts/fontin_sans_regular.ttf') format('truetype'),
         url('fonts/fontin_sans_regular.svg#drevodel_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'drevodel_regular';
    src: url('fonts/drevodel_regular.eot');
    src: url('fonts/drevodel_regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/drevodel_regular.woff2') format('woff2'),
         url('fonts/drevodel_regular.woff') format('woff'),
         url('fonts/drevodel_regular.ttf') format('truetype'),
         url('fonts/drevodel_regular.svg#drevodel_regular') format('svg');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+30-39;
}

[Сергей Горячев]

Ankhena, точнее так)
С гуглофонтом не работает в хроме, в мозилле норм.

Answer 2

[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. А вообще лучше подберите максимально похожий шрифт с маюскульными цифрами)

Comments

[Евгений Обыкновенный]

Спасибо. Получилось заменить шрифт, а размер - нет.

Answer 3

[Никита Юдин]

Можно использовать свойство 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;
}

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

Но если вам нужно изменить цифры в списке, то это делается по-другому.

Comments

[Евгений Обыкновенный]

Не в списке, в любом месте текста на странице.
Мне надо поменять шрифт и размер для цифр. Не пойму, можно ли это сделать таким образом.