¿Hay alguna manera de especificar el uso de texto o cifras de titulación en CSS?

Mis fuentes de elección por lo general de forma predeterminada texto cifras¿Hay alguna manera de especificar el uso de texto o cifras de titulación en CSS?

Text figures http://hypftier.de/dump/numerals-text.png

que es una de las razones que me gustan. Sin embargo, para las tablas o en las partidas que me gustaría especificar que las cifras de revestimiento se deben utilizar:

Titling figures http://hypftier.de/dump/numerals-titling.png

¿Hay una manera de hacerlo en CSS?

(Para apaciguar la búsqueda:

números de estilo antiguo, figuras del texto, figuras no-revestimiento, números medievales
números de revestimiento, figuras de titulación)

Fuente

2010-05-30 Joey

ejemplo sería bueno – Jason

yo habría pensado que este es específica para el tipo de letra. No conozco nada como esto en CSS. – Tom

@Jason: supongo que es de conocimiento público, lo siento. Editado – Joey

Firefox 4.0 tiene text figure support básica. Así es como para encender texto (cifras de estilo antiguo):

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

Parece que hay un conjunto de propiedades de CSS3, como font-variant-numeric, para controlar las propiedades comunes. Estos no son compatibles con ningún navegador, hasta donde yo sé.

Aquí hay un jsFiddle donde puedes jugar con los estilos. Cambia entre forro y figuras antiguas. Estoy usando Minion Pro en Windows 7, por lo que es posible que deba encontrar su propia fuente admitida en otras plataformas.

Fuente

2011-06-18 02:20:16 theazureshadow

Sigue siendo una solución patentada * suspiro *. Ojalá, CSS obtenga ese apoyo, eventualmente. – Joey

Bueno, está allí, en forma de borrador. Solo tenemos que esperar hasta que los navegadores lo admitan. Espero que Firefox sea bastante rápido en eso, ya que ya cuentan con el soporte, es solo un cambio de interfaz. – theazureshadow

@Joey: IE10 admite varias características de opentype con '-ms-font-feature-settings': http://ie.microsoft.com/testdrive/Graphics/OpenType/ También vea http://caniuse.com/font-feature –

No, no hay tal propiedad en el CSS 2.1 specification. Depende del navegador web elegir una fuente disponible en el sistema y representarla con el estilo 'predeterminado'.

Un vistazo rápido en el CSS 3 Working Draft tampoco revela una opción como esta.

Y aunque se puede utilizar la propiedad @font-face en newer browsers, no parece ser una opción para seleccionar características de OpenType en general (como el uso de lining or oldstyle figures).

Una búsqueda rápida reveló que ha habido un debate al respecto en el W3 CSS mailing list.

Actualización: Inspirado por Creating Custom Font Stacks with Unicode-Range que decidí darle una oportunidad unicode-range propiedad. Por desgracia, no puede cambiar la tabla de búsqueda para usar figuras personalizadas cuando se usan las figuras normales 0-9.

Pero, aunque no es conveniente para introducir dígitos en altos rangos Unicode (por ejemplo, utiliza el Unicode code converter), se es posible utilizar un conjunto específico de figura, por ejemplo, alineando los números de las tablas (y la ligadura fi también):

<!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 ﬁgures: </p> 
</body> 
</html>

Fuente

2010-05-30 22:52:11

Hm, lo temí tanto. Es interesante que CSS permite un control bastante detallado sobre la composición tipográfica en algunos casos y casi por completo descuidar la tipografía. – Joey

@Johannes Usted puede, por supuesto, usar esa granularidad para hacer lo que quiera. Usando @ font-face, puede definir el estilo alternativo como "Forrado del nombre de la fuente" o asignarlo como lo haría con una fuente completamente diferente. –

@D_N: de acuerdo, aunque @ font-face no es [ampliamente compatible] (http://webfonts.info/wiki/index.php?title=%40font-face_browser_support), aún. –

características de OpenType son ahora soportados en muchos navegadores:

font-feature-settings: 'lnum'

-viejo estilo también es apoyado a través de 'onum'. Puede omitir '= 1' para indicadores booleanos.

Consulte Mozilla's description para obtener más información, o this more thorough writeup de las distintas características de fuente.

Fuente

2013-08-19 18:33:55

+1 Aquí hay una lista de valores posibles: https://css-tricks.com/almanac/properties/f/font-feature-settings/#article-header-id-0 Por supuesto, la fuente elegiste necesitar tener esos caracteres específicos. –

Prueba esto ..

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; 
    }

Fuente

2015-04-22 11:28:34 buTs

¿En qué se diferencia esto de la respuesta de theazureshadow de hace cuatro años, o la respuesta de Alex de hace dos años? – Joey

¿Hay alguna manera de especificar el uso de texto o cifras de titulación en CSS?

Respuesta

Cuestiones relacionadas