css - todos - Qué navegadores admiten la inserción de fuentes

webkit firefox

Question

He estado leyendo sobre la regla @ font-face y tratando de determinar si vale la pena usarla en un proyecto para representar "franklin gothic medium" para el título en lugar de algo como sIfr. Pensé que para los navegadores que no lo admitan podría hacer que recurriera a Arial.

El problema es que estoy teniendo problemas para obtener una respuesta definitiva sobre qué navegadores son compatibles con la incrustación de fuentes de esta manera.

Hasta ahora he calculado que el IE sí lo hace, pero no admite archivos .ttf. Otros navegadores No estoy seguro.

Si alguien pudiera indicarme algún tipo de tabla de compatibilidad, sería genial.

Jon

Answer 1

@nezroy, aquí hay una actualización:

[Actualización 2] Opera 10, y Firefox 3.1 ahora admite vincular a TrueType y OpenType (pero no EOT) en el envío de alfas o betas actualmente.

Answer 2

No lo hacen, su mejor opción es hacer algo como lo siguiente:

<h1 id="MyHeading">my heading</h1>

h1#MyHeading {
    text-indent: -1000px;
    width: 200px;
    height: 50px;
    background-image: url(myheading.jpg);
}

Esta arícula explica algunas otras alternativas.

Editar: No sé por qué esto ha sido votado negativamente. En pocas palabras, no hay una manera accesible, seo amigable de hacer lo que quiera y que sea compatible con todos los navegadores. Si quieres alejar a tus usuarios, busca una de las otras soluciones. De lo contrario, mantendré a mis usuarios contentos con mi -1.

Answer 3

OK, entonces creo que la mejor manera de hacerlo es la siguiente ...

• Use una fuente ttf en la primera instancia
• Volver a una fuente OET para IE
• Vuelva a utilizar Arial, sans-serif para los navegadores que no admiten fuentes incrustadas en absoluto.

Genial, ahora solo tengo que encontrar algunas fuentes EOT.

Answer 4

Recuerdo que gente de Safari escribió con orgullo una publicación de blog, que Webkit podía descargar fuentes ttf y usarlas automáticamente cuando estaban en la fuente de la página. IE ha admitido la descarga de fuentes de mapa de bits para siempre.

Answer 5

Si no tienes miedo de algunos guiones de Java, esta publicación podría ayudarte: http://www.webresourcesdepot.com/use-any-font-via-javascript-typefacejs/ .

No lo he usado yo mismo, pero promete soportar cualquier fuente en cualquier navegador ...

Answer 6

el kit web también lo hace

El modo quirks ha sido durante mucho tiempo un buen recurso para tablas de compatibilidad para js y css

Answer 7

Safari 3.1 (y compilaciones de Webkit Nightly ), Firefox 3.1 y Opera 10 admiten la incrustación @ font-face para .ttf (fuentes TrueType) y .otf (fuentes OpenType). La versión 5+ de Internet Explorer solo admite la incrustación @ font-face para .eot (un formato de tipo abierto incrustado patentado).

Microsoft crea una horrible herramienta de conversión de fuentes llamada WEFT (solo Windows) que puede usar para convertir la mayoría de los formatos de fuente a .eot.

CSS3.info tiene un buen y breve tutorial sobre cómo usar la regla @ font-face. El sitio es un gran recurso para jugar con trucos de CSS3 (o en este caso, trucos propuestos por CSS2).

Hay un artículo más completo sobre este tema en A List Apart .

Asegúrese de que todas las fuentes que incrusta en una página web indiquen que está bien hacerlo en sus licencias, ya que la fuente vivirá en su servidor web en un directorio público, gratis para que cualquiera la descargue. Este uso no siempre está explícitamente cubierto en la licencia, pero generalmente puede contactar al diseñador directamente para preguntar. Por lo general, le permiten usar una fuente siempre que incluya un enlace a su página. No estoy seguro si Franklin Gothic Medium está aprobado para este uso, pero dudo que lo sea.

Aquí hay algunos recursos para fuentes gratuitas. Si haces suficiente excavación, generalmente puedes encontrar una cara similar que funcione para ti:

• Ray Larabie
• Dieter Steffmann
• Jos Buivenga

Answer 8

Escribió sobre eso aquí:

http://interactivity.ifactory.com/2010/04/font-face/

Básicamente, el 95% de los navegadores modernos ahora lo admiten:

IE6 +, FF 3.5+, Chrome, Safari 3.1+, Opera.

Answer 9

Este artículo analiza el soporte del navegador a mitad de camino. Este es el bit más relevante, aunque todo vale la pena leerlo:

CSS3 (e incluso los borradores de CSS2 en 1997 y 1998) han prometido durante mucho tiempo una forma estandarizada de inserción de fuentes, utilizando la regla @ font-face. Lo que mucha gente probablemente desconoce es que esta regla ya es compatible con Opera 9.5, envía versiones de Safari para Mac, Windows e iPhone OS, y está prometida para Firefox 3.1., Y también para IE6 y posterior.

Lamentablemente, aunque se sugirió soporte para @ font-face para Opera 9.5 y Firefox 3.1 (ver mis comentarios en el n. ° 4 a continuación), este no es el caso, lamentablemente.

Sin embargo, hay una trampa. Todos los navegadores distintos de IE admiten enlaces a archivos de fuentes TrueType. Microsoft solo admite el formato de archivo EOT patentado.

EDITAR: Incluye esta actualización de la respuesta de Ric Tokyo .

[Actualización 2] Opera 10, y Firefox 3.1 ahora admite vincular a TrueType y OpenType (pero no EOT) en el envío de alfas o betas actualmente.