Colon verticalmente centrado para el tiempo

Este artículo analiza los dos puntos centrados verticalmente en la fuente San Francisco de Apple.

Colon alineado verticalmente

Mi aplicación web usa la fuente Montserrat , especificada en CSS de la siguiente manera:

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

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

Estoy luchando para obtener dos puntos centrados verticalmente para mostrar una hora (por ejemplo 9:41).

¿Cómo puedo hacer dos puntos centrados verticalmente con la fuente Montserrat en el contexto de una aplicación web?

exactamente "cómo" dependerá de su implementación. Lo que se llama esto es un cambio de línea de base . Por lo que puedo ver, esta es una función de representación de tipos de Apple al estilo de las comillas tipográficas o fracciones: busca {dos puntos rodeados de números} y {hace magia}. Si tuviera que rodar el mío y no tuviera forma de consultar la altura específica del glifo, simplemente establecería manualmente el cambio de línea de base para una muestra decente de tamaños de letra de la fuente que me interesaba, y luego vería si podía derivar una fórmula apropiada para generalizar.
Como dijo Yorik, cómo dependerá completamente de la implementación. ¿Podría editar su pregunta con más detalles sobre cómo está implementando esto?
He actualizado la pregunta para explicar que mi implementación se basa en CSS y un .otfarchivo de fuente.
La (magia) mencionada anteriormente puede muy bien ser una función OpenType, específica de la fuente. Si es así, entonces no hay razón para suponer que exactamente la misma característica está presente en una fuente completamente diferente. Es como, dado que Minion Pro tiene una ligadura "Th", suponiendo que todas las fuentes tienen una. Necesitarás Trickery CSS simple y antiguo en este caso.
Puede ser una función de tipo abierto, pero supuestamente los desarrolladores pueden cambiarla. No pude encontrar detalles sobre eso, aunque desde el punto de vista del usuario, la mayoría de esas características son clases, por lo que si aprovechan las "formas posicionales" y desea que la línea de base de dos puntos se desplace, ¿pierde los otros glifos que dependen de esa característica? ¡Las mentes curiosas quieren saber!
¿Qué has intentado para que suceda este efecto? Requerimos que incluyas eso en la pregunta.

Respuestas (2)

Considerar:

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

Y los estilos:

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

Y los dos puntos se agregan con una pseudoclase, usa EM para desplazar la parte superior hacia arriba en un 10 % de cualquier tamaño de letra (1EM = 100 %; .1EM = 10 %).

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

Para obtener una aproximación perfecta, realice varias pruebas en diferentes tamaños de letra y vea si puede encontrar un buen valor EM viable para la fuente que desea.

Probablemente sea recomendable que pruebe esto para la compatibilidad con el navegador si no está trabajando con un solo destino de renderizado.

Aparentemente, la respuesta es usar (como lo hace gnome) el carácter unicode RATIO, ya que son dos puntos centrados. (Aprendí esto porque mi fuente casera no era compatible con RATIO, pero eso es fácil de arreglar para mí).

Colon verticalmente centrado para el tiempo
RespuestasAquíPolítica de privacidad1y, 0v