Есть ли способ указать использование текста или титров рисунков в CSS? - PullRequest
15 голосов
/ 31 мая 2010

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

Текстовые цифры http://hypftier.de/dump/numerals-text.png

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

Титульные цифры http://hypftier.de/dump/numerals-titling.png

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

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

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

Ответы [ 4 ]

5 голосов
/ 18 июня 2011

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

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

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

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

2 голосов
/ 31 мая 2010

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

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

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

Быстрый поиск показал, что в списке рассылки W3 CSS * было 1018 *.

.

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

Но, хотя неудобно вводить цифры в высоких диапазонах Юникода (например, использовать Преобразователь кода Юникода ), можно использовать для конкретного набора цифр, например, цифры подкладки для таблиц (а также для подписи):

<!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>
1 голос
/ 22 апреля 2015

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

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;
    }
1 голос
/ 19 августа 2013

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

font-feature-settings: 'lnum'

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...