Как построить «строчные цифры» (т. Е. Текстовые цифры)?


12

Есть ли приемлемый способ настройки шрифтов, чтобы имитировать текстовые рисунки ?

введите описание изображения здесь

Фон

Текстовые цифры представляют собой «строчные» цифры. Обычно вы используете строчные цифры, где вы также используете строчный текст (например, в середине предложения).

Клавиатуры никогда не создавались с прописными и строчными цифрами; и Unicode специально не кодирует их, так как «они не считаются отдельными символами от подкладочных фигур, это просто другой способ написания одних и тех же символов».

Что подводит меня к моему вопросу; Каков приемлемый способ создания строчных цифр из стандартных «прописных» шрифтов?

Википедия упоминает, что обычно :

  • 012являются x-высот
  • 68 есть восходящие
  • 34579 есть спуски

введите описание изображения здесь

Моя первая попытка (в фотошопе):

  • смуш 012
  • подтолкнуть 34579 вниз
  • оставить 68, где они находятся:

введите описание изображения здесь

введите описание изображения здесь

Но фигуры помахивания (0, 1, 2) выглядят явно неприятно.

Если консорциум Unicode предполагает, что «строчные цифры» могут быть просто созданы из «прописных» - что они рекомендуют мне делать?

В идеале в HTML

Моя конечная цель - отображать строчный текст в браузере. я знаю, что некоторые шрифты (например, Грузия) уже отображают все свои цифры в нижнем регистре:

введите описание изображения здесь

Но я не спрашиваю, как перейти на использование Грузии ; Я спрашиваю, как построить подкладку фигур из подкладки.

И так как это для показа в сети, я понимаю, что мне, вероятно, придется применить форматирование для каждого символа:

<!doctype html">
<html>
<head>
    <style type="text/css">
        body {
            font-family: "Segoe UI", "Calibri", sans-serif;
            font-size: larger;
        }

        .xheight {
            font-size: 1.5ex;
        }

        .descender {
            position: relative;
            bottom: -0.4ex;
        }
    </style>
</head>
<body>
    <p>In the year <span class="xheight">21</span><span class="descender">5</span><span>6</span> the Romulan war...
</body>
</html>

Рендеринг как:

введите описание изображения здесь

Что, опять же, выглядит не так приятно, как мне кажется.

Эй, смотри, копейки!

введите описание изображения здесь

Ответы:


11

Очень короткий ответ "Нет"

Цифры старого стиля («строчные буквы») специально нарисованы именно так. Шрифты Legacy Postscript и TrueType, по большей части, содержат только табличные рисунки, которые являются выравниванием или старым стилем в соответствии с тем, как разработан шрифт.

Консорциум Unicode не предполагает, что фигуры подкладки могут быть искажены в фигуры старого стиля, просто существует только один набор значений Unicode для цифр 0-9, независимо от того, есть ли несколько глифов для каждой цифры.

Многие шрифты OpenType содержат как подкладочные, так и старые стили, как в табличной, так и в пропорциональной ширине, при этом обычные значения по умолчанию - табличные подкладочные фигуры. Все они доступны для приложений, поддерживающих OpenType, обычно через настройку предпочтений в стиле символа или абзаца. Они имеют общие значения Unicode, но они отдельно нарисованы альтернативными символами, которые существуют (или не существуют) как контуры в программном обеспечении шрифтов. (Из семейств шрифтов в вашем CSS у Calibri есть устаревшие фигуры, но у Segoe UI нет.)

С типографской точки зрения, не только нет приемлемого способа сделать то, что вы просите, но я бы сказал, что нет и приемлемого способа. Как вы обнаружили, попытка достичь этого путем смещения базовых линий и искажения линий выравнивания выглядит ужасно.


Хороший ответ, но кажется, что возникает вопрос, когда браузеры будут полностью поддерживать OpenType, в той степени, что они могут указать в CSS, какой стиль чисел использовать, когда шрифт содержит оба.
e100

1
Также важно отметить, что нет никакого способа гарантировать, что "Segoe UI", "Calibri" или даже без засечек является фактическим отображаемым шрифтом. Точные значения базовой линии и высоты х могут выглядеть еще более ужасно в произвольном старом стиле, который установил пользователь.
Горацио

Любое представление о том, почему консорциум Unicode не кодируют отдельные глифы для строчных и заглавных букв цифр, но сделал закодировать отдельные глифы верхнего регистра A( U+0041), нижний регистр a( U+0061), и даже sᴍᴀʟʟ cᴀᴘɪᴛᴀʟ ( U+1D00)? Т.е. в чем может быть причина, которая исключает отдельные прописные и строчные цифры, но включает в себя отдельные прописные и строчные буквы?
Ян Бойд

И, наконец, можете ли вы назвать шрифт OpenType, который содержит как прописные, так и строчные буквы ?
Ян Бойд

1
@IanBoyd: обычные прописные и строчные символы имеют различное значение, и поэтому переключение между ними - гораздо больше, чем стилистический выбор. Однако прописные и строчные числа идентичны по значению и, следовательно, просто не представляют собой ничего, что Unicode хочет кодировать - по той же причине, по которой нет специальных кодировок для курсива, маленьких заглавных букв, строчных букв и тому подобного. Символы маленьких заглавных букв, которые вы найдете, кодируются только потому, что они имеют особое значение в фонетике и не должны использоваться для акцентирования (для этого вы должны использовать функции OpenType или аналогичные).
Wrzlprmft

5

Правильный способ рендеринга строчных цифр / цифр или «фигур старого стиля» - использовать CSS для выбора подходящего шрифта. Очевидно, что используемый шрифт должен поддерживать эту функцию шрифта в первую очередь. Реальная поддержка веб-шрифтов не кажется слишком сильной.

Настройка CSS, которую вы ищете

font-feature-settings: "onum";

и документация:

Документацию по функциям OpenType, onumв частности, по функциям, можно найти в реестре тегов Microsoft OpenType Layout .

Альтернативная документация о функциях шрифтов доступна в статье Как кодировать функции OpenType в CSS .

Официально вы должны использовать

font-variant-numeric: oldstyle-nums;

но поддержка этого кажется еще более слабой в соответствии с рекомендациями Mozilla о совместимости браузеров .

Теоретически это лучше, потому что он не относится непосредственно к функциям OpenType, поэтому он должен работать и со шрифтами не-OpenType. Точно так же вы должны использовать:

font-variant: small-caps; 

включить маленькие заглавные буквы . Вы не использовать функцию OpenType настройки , такие как

font-feature-settings: "smcp";

чтобы достичь этого эффекта, потому что font-variantсвойство уже хорошо поддерживается.


Нет, вы никогда не хотите использовать, font-variant: small-caps;потому что это создает ложные заглавные буквы. Всегда используйте другой и всегда используйте шрифты OpenType. Просто и решаемо.
tchrist

Согласно определению ( w3.org/TR/CSS21/fonts.html#propdef-font-variant ), это acceptableесли фальшивкаsmall-caps . Это не является обязательным требованием, и высококачественный пользовательский агент сделает все правильно (сопоставьте его с функцией OpenType). Я согласен, что если вы предпочитаете не менять вместо маленьких заглавных букв, вы должны использовать font-feature-settings. Обычно поддельные маленькие шапочки лучше, чем вообще без эффекта.
Микко Ранталайнен
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.