Вертикально центрированное двоеточие для времени

В этой статье обсуждается вертикально центрированное двоеточие в шрифте Apple San Francisco.

Выровнять двоеточие по вертикали

В моем веб-приложении используется шрифт Montserrat , указанный в CSS следующим образом:

@font-face {
    font-family: 'Montserrat-Light';
    src: url('fonts/Montserrat-Light.otf');
}

* {
    font-family: 'Montserrat-Light';
}

Я изо всех сил пытаюсь получить вертикально центрированное двоеточие для отображения времени (например 9:41).

Как сделать вертикально центрированное двоеточие шрифтом Montserrat в контексте веб-приложения?

именно "как" будет зависеть от вашей реализации. То, что это называется сдвигом базовой линии . Из того, что я вижу, это функция рендеринга шрифтов Apple в стиле умных кавычек или дробей: она ищет {двоеточие, окруженное цифрами} и {делает магию}. Если бы мне пришлось свернуть свой собственный и у меня не было возможности запросить конкретную высоту глифа, я бы просто вручную установил сдвиг базовой линии для приличной выборки размеров шрифта, который меня интересовал, а затем посмотрел, смогу ли я вывести соответствующую формулу для обобщения.
Как сказал Йорик, как будет полностью зависеть от реализации. Не могли бы вы отредактировать свой вопрос, указав более подробную информацию о том, как вы это реализуете?
Я обновил вопрос, чтобы объяснить, что моя реализация основана на CSS и .otfфайле шрифта.
Упомянутая выше (магия) вполне может быть функцией OpenType, специфичной для шрифта. Если это так, то нет причин предполагать, что точно такая же функция присутствует в совершенно другом шрифте. Это похоже на то, что, поскольку Minion Pro имеет лигатуру «Th», предполагается, что она есть у всех шрифтов. В этом случае вам понадобится старый добрый CSS Trickery.
Это может быть функция открытого типа, но предположительно ее можно переключать для разработчиков. Я не смог найти никаких подробностей по этому поводу, хотя с точки зрения пользователя большинство этих функций являются классами , поэтому, если они используют «позиционные формы», и вы хотите сместить базовую линию двоеточия, вы потеряете другие глифы, которые зависят от этой функции? Пытливые умы хотят знать!
Что вы пытались добиться такого эффекта? Мы требуем, чтобы вы включили это в вопрос

Ответы (2)

Рассмотреть возможность:

<span class="hour">10</span><span class="minute">30</span>

И стили:

.hour, .minute {
font-size: 60px;
line-height: 80px;
background-color: #aaaaaa;
}

И двоеточие добавляется с псевдо-классом, использует EM для смещения верхней части вверх на 10% независимо от размера шрифта (1EM = 100%; .1EM = 10%).

.hour::after {
content: ":";
position: relative;
top: -.1em;
background-color: #dddddd;
}

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

Вероятно, вам рекомендуется протестировать это для поддержки браузера, если вы не работаете с одной целью рендеринга.

По-видимому, ответ заключается в использовании (как это делает gnome) символа юникода RATIO, поскольку это двоеточие по центру. (Я узнал об этом, так как мой самодельный шрифт не поддерживал RATIO, но мне легко это исправить).

Вертикально центрированное двоеточие для времени
СпросиСетьПолитика конфиденциальности1y, 0v