2009-01-28 7 views
9

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.Qué navegadores admiten la inserción de fuente

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

Hasta ahora he resuelto el IE, pero no admite archivos .ttf. Otros navegadores No estoy seguro.

Si alguien pudiera indicarme algún par de tablas de compatibilidad, sería genial.

Jon

Respuesta

7

This article analiza el apoyo del navegador a mitad de camino en Aquí está la parte más relevante, a pesar de todo el asunto es digno de una lectura:.

CSS3 (e incluso los borradores de CSS2 en 1997 y 1998) han prometido durante mucho tiempo una forma estandarizada de inserción de fuentes, usando 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 versiones posteriores.

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, por desgracia.

Aunque 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: Incluyendo this update de Ric Tokyo la respuesta.

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

Ellos no, lo mejor 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); 
} 

This Aricle explica algunas otras alternativas.

Editar: No sé por qué esto ha sido degradado. 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.

+0

Hola Andrew. Estamos tratando de alejarnos del uso de imágenes. @ font-face es amigable con el SEO y accesible. – jonhobbs

+0

, al menos debería sugerir agregar un nombre o un selector alt por razones de seo. – thatmiddleway

+0

me encanta recibir votos atrasados ​​3 años después –

0

Recuerdo gente Safari escribir con orgullo un blog-post, que Webkit podría descargar fuentes TTF y utilizarlos automáticamente, cuando están en la fuente de la página. IE ha admitido la descarga de fuentes de mapa de bits para siempre.

1

@nezroy, here es una actualización:

[Actualización 2] Opera 10, y Firefox 3.1 ahora admite la vinculación a TrueType y OpenType (pero no EOT) en el momento de enviar alfa o beta.

5

Safari 3.1 (y Webkit Nightly construye), Firefox 3.1, Opera y 10 de apoyo @ font-face para incrustar .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 pequeña y 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 bonito, brief 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úrate de que las fuentes que insertas en una página web indiquen que está bien hacerlo en sus licencias, ya que la fuente vivirá en tu servidor web en un directorio público, gratis para que cualquiera pueda descargar. 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 lo hace lo suficientemente excavación, por lo general puede encontrar una cara similar que funcione para usted:

0

bien, así que creo que la mejor manera de hacerlo esto es como sigue ....

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

Genial, ahora solo tengo que encontrar algunas fuentes EOT.

Cuestiones relacionadas