Fuentes en la Web

Question

La colección de fuentes disponibles para un desarrollador web es deprimentemente limitada. Recuerdo haber leído hace mucho tiempo acerca de TrueDoc, como una forma de enviar fuentes junto a un sitio web, pero parece haber languidecido. Alguien ha usado esto, o algo similar? ¿Es compatible con suficientes navegadores? ¿Me estoy perdiendo una buena solución?

Tenga en cuenta que un desarrollador web responsable no utiliza fuentes que solo están disponibles en Windows (y especialmente que solo están disponibles en Vista), ni utiliza una tecnología que no es compatible con al menos la mayoría de navegadores.

---

Actualización: Como varias personas han señalado, no hay nada de malo en que proporciona una lista de los tipos de retorno para las personas que no tienen el tipo de letra específico que utilice. De hecho, siempre hago esto, y no quise sugerir que esto fuera incorrecto.

Si bien mi pregunta fue mal formulada, lo que quise decir es que un diseñador no debe hacer demasiadas suposiciones sobre lo que el cliente tendrá disponible. Debe planificar cómo verán todos los usuarios su sitio, no solo para las personas que usen su configuración preferida.

Answer 1

Safari, y en menor medida, Firefox 3 tiene soporte para @font-face en CSS, que le permite usar fuentes personalizadas. Sin embargo, debe tener la licencia apropiada para distribuir los archivos de fuentes. Estos artículos explican con más detalle:

• http://www.css3.info/preview/web-fonts-with-font-face/
• http://www.alistapart.com/articles/cssatten
• http://www.sitepoint.com/blogs/2008/07/30/custom-web-fonts-pick-your-poison/

Answer 2

CSS2 ofrece:

@font-face { 
    font-family: Garamond; 
    src: url(garamond.eot), url(garamond.pfr); 
} 

Answer 3

Tenga en cuenta que un desarrollador web responsable no utiliza fuentes que sólo están disponibles en Windows (y especialmente los que sólo están disponibles en Vista), ni usan una tecnología eso no es compatible con al menos la mayoría de los navegadores.

Bien ... Puede hacerlo, siempre que sepa cómo se representará en un sistema operativo que no sea de Vista o que no sea Windows.

De lo contrario: sí, @ font-face en CSS2 es la mejor alternativa estándar, incluso si no es ampliamente compatible.

Answer 4

Tenga en cuenta que un desarrollador web responsable no utiliza fuentes que sólo están disponibles en Windows (y especialmente aquellos que solo están disponibles en Vista), ni usan una tecnología que no es compatible con al menos la mayoría de los navegadores.

No hay nada de malo o incorrecto en el uso de fuentes específicas de Windows/Vista, siempre que se degrade graciosamente a una fuente ampliamente disponible. Por ejemplo:

font-family: Calibri, Tahoma, Helvetica, Sans-Serif; 

De hecho, ese es el punto!

Answer 5

Por supuesto, puede usar SIFR.

Esto se degrada graciosamente en los navegadores que no son compatibles y es accesible.

No es realmente adecuado para usar en montones de texto, pero para los encabezados y resaltar texto es perfecto.

Por supuesto, este es un trabajo en torno a una limitación intrínseca de los navegadores y la web en este momento, pero cuando este no era el caso para la mayoría de las tecnologías y técnicas web.

Answer 6

Este es un hilo oportuno; cambiamos a Arial porque Calibri es MUY pequeño en comparación con todas las otras fuentes de respaldo. Le dolía mí en gran medida a cambiar a (gag) Arial porque es una copia de basura de Helvetica:

http://www.ms-studio.com/articles.html

Las dificultades de tamaño (demasiado grande si vas con un tipo de letra "c" como su estándar; demasiado pequeño si vas con algo normal) se describen en detalle aquí:

http://neosmart.net/blog/2006/css-vistas-new-fonts/

voy a extrañar hermosa RGB afinado la mano de Calibri aliasing mucho, pero era imposible ofrecer una buena experiencia para la mayoría de los usuarios sin exigir Calibri estar instalado. Es razonablemente común, ya que viene con Office 2007 (Win/Mac) y, por supuesto, Vista ... pero está lejos de ser universal, por lo que es un poco irresponsable confiar en él para una audiencia web global.

Answer 7

IE admite @font-face (comenzó como su tecnología patentada en MS Word). Here's a blog post from the IE team about it just about a month ago.

Answer 8

Tenga en cuenta que un desarrollador web responsable no utiliza fuentes que sólo están disponibles en Windows (y especialmente los que sólo están disponibles en Vista), ni usan una tecnología que no está soportada por al menos la mayoría de los navegadores

Creo que esto es bastante perdido el punto. No importaría si lo hicieras; todos obtendrían algo sensato que podrían leer fácilmente, y los que lo necesitan pueden cambiar la fuente a lo que quieran de todos modos porque solo es texto y todos los principales navegadores le permiten personalizar la fuente que ve, independientemente de las preferencias del diseñador del sitio.

No hay nada malo en sugerir fuentes en su CSS que algunos usuarios no tienen; ellos solo ven algo diferente de ti. Diferente no está roto. Ni siquiera se preguntarán por qué estás usando fuentes predeterminadas porque no sabrán que otras personas ven algo diferente.

Este es el punto central de los conjuntos de fuentes:

Verdana, Arial, Helvetica, sans-serif 

Es una buena práctica precisamente porque reconoce que la gente va a ver las cosas diferentes.

Esta es una buena práctica también:

Gill Sans, Verdana, Arial, Helvetica, sans-serif 

Así que la mayoría de las personas no tienen Gill - a quién le importa? Obtienen un sitio perfectamente bueno independientemente.

Y esto estaría bien también, pero un poco raro y perezoso:

Gill Sans 

diseño web Irresponsable es hacer las cosas como poner el texto como las imágenes sin necesidad de utilizar el texto alternativo, no utilizando las fuentes interesantes en los conjuntos de fuentes.

Answer 9

Imagino que cualquier método de envío de fuentes con una página web supondría algún tipo de riesgo de seguridad. He oído hablar de métodos donde, en el caso de que el cliente no tenga la fuente requerida, el texto puede ser reemplazado dinámicamente con una imagen o algún tipo de flash mostrado. El único como este que puedo encontrar ahora está en AListApart pero puede que ya sea redundante. Dicho método también requeriría css, images y javascript para funcionar y podría ser doloroso implementarlo en todos los navegadores.

Answer 10

Puede hacerlo con el nuevo @font-face declaration disponible en CSS3. También es muy compatible con una característica de CSS3 (por ejemplo, desde IE4).

La sintaxis general es:

@font-face { 
    src: url('path to your font') format('woff|ttf|svg|eot|…'); 
    font-family: the name to use; 
    font-weight: an optional weight; 
    font-style: an optional style; 
}

También hay a generator available que convierte la fuente a múltiples formatos y crea el CSS correspondiente.

Hoy en día, recomendaría proporcionar solo un archivo WOFF; es conveniente, easy to create.

Además, asegúrese de citar el nombre del formato (por ejemplo, format('woff')); de lo contrario, no funcionará en Firefox.