Есть ли способ указать использование текста или титрования в CSS?

Мои выбранные шрифты обычно по умолчанию текстовые цифры

Text figures

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

Titling figures

Есть ли способ сделать это в CSS?

(Чтобы успокоить поиск:

  • цифры в старинном стиле, текстовые фигуры, нелегированные фигуры, средневековые цифры
  • подкладочные цифры, титульные цифры)

Ответы

Ответ 1

В Firefox 4.0 есть базовая поддержка текстовых фигур. Здесь, как включить текстовые (старомодные) цифры:

.text-figures {
  -moz-font-feature-settings: "onum=1";
}

Похоже, существует набор свойств css3, таких как font-variant-numeric, для управления общими свойствами. Насколько мне известно, они пока не поддерживаются ни одним браузером.

Здесь jsFiddle, где вы можете поиграть со стилями. Он переключается между подкладкой и фигурами старого стиля. Я использую Minion Pro в Windows 7, поэтому вам, возможно, придется найти свой собственный поддерживаемый шрифт на других платформах.

Ответ 2

Нет, нет такого свойства в спецификации CSS 2.1. Для веб-браузера выберите шрифт, доступный в системе, и сделайте его с помощью любого стиля по умолчанию.

Быстрый просмотр CSS 3 Working Draft также не показывает такой вариант.

И хотя вы можете использовать свойство @font-face в более новые браузеры, похоже, нет возможности выбирать функции OpenType вообще (например, используя подкладки или цифры в старом стиле).

Быстрый поиск показал, что об этом говорилось в W3 CSS список рассылки.

Обновление: Вдохновленный Создание пользовательских стеков шрифтов с Unicode-диапазоном Я решил предоставить свойство unicode-range попробуйте. Увы, вы не можете изменить таблицу поиска, чтобы использовать пользовательские цифры, когда используются обычные цифры 0-9.

Но, хотя не очень удобно вводить цифры в высоких диапазонах Unicode (например, используйте Unicode code converter), можно использовать конкретный набор цифр, например подкладочные цифры для таблиц (а также для обозначения):

<!DOCTYPE html>
<html>
 <head>
  <meta charset=utf-8>
  <title>Table numerals</title>
  <style>
   @font-face {
     font-family: Calluna;
     src: url(http://localhost/Calluna-Regular.otf);
   }
   body { font-family: Calluna }
   #f { font-size: 32pt }
  </style>
 </head>
 <body>
  <p id="f">Table figures: </p>
 </body>
</html>

Ответ 3

Функции OpenType теперь поддерживаются во многих браузерах:

font-feature-settings: 'lnum'

Старый стиль также поддерживается с помощью 'onum'. Вы можете опустить '= 1' для булевых флагов.

Подробнее см. описание Mozilla или эта более тщательная запись различных функций шрифта.

Ответ 4

Попробуйте это.

body {
        -moz-font-feature-settings:"lnum" 1;
        -moz-font-feature-settings:"lnum=1";
        -ms-font-feature-settings:"lnum" 1;
        -o-font-feature-settings:"lnum" 1;
        -webkit-font-feature-settings:"lnum" 1;
        font-feature-settings:"lnum" 1;
        font-variant-numeric: lining-nums;
    }