html - texto - Fuentes en la web
tipos de etiquetas html (10)
Tenga en cuenta que un desarrollador web responsable no utiliza fuentes que solo están disponibles en Windows (y especialmente las que solo están disponibles en Vista), ni utiliza una tecnología que no es compatible con al menos la mayoría de los navegadores.
Bueno ... Puedes hacerlo, siempre que sepas cómo se renderizará en un sistema operativo que no sea de Vista o que no sea de Windows.
De lo contrario: sí, @ font-face en CSS2 es la mejor alternativa estándar, incluso si no es ampliamente compatible.
Esta pregunta ya tiene una respuesta aquí:
- ¿Cómo incrustar fuentes en HTML? 6 respuestas
La colección de fuentes disponible 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 las que solo están disponibles en Vista), ni utiliza una tecnología que no es compatible con al menos la mayoría de los navegadores.
Actualización: como han señalado varias personas, no hay nada de malo en proporcionar una lista de fuentes alternativas para las personas que no tienen la fuente específica que utiliza. De hecho, siempre hago esto, y no quise sugerir que esto fuera incorrecto.
Si bien mi pregunta estaba 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.
Tenga en cuenta que un desarrollador web responsable no utiliza fuentes que solo están disponibles en Windows (y especialmente las que solo están disponibles en Vista), ni utiliza una tecnología que no es compatible con 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 es solo 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 principal de los conjuntos de fuentes:
Verdana, Arial, Helvetica, sans-serif
Es una buena práctica precisamente porque reconoce que las personas verán cosas diferentes.
Esta es una buena práctica también:
Gill Sans, Verdana, Arial, Helvetica, sans-serif
Entonces la mayoría de la gente no tiene Gill, ¿a quién le importa? Obtienen un sitio perfectamente bueno independientemente.
Y esto también estaría bien, pero un poco raro y perezoso:
Gill Sans
El diseño web irresponsable hace cosas como configurar texto como imágenes sin usar texto alternativo, sin utilizar fuentes interesantes en conjuntos de fuentes.
Tenga en cuenta que un desarrollador web responsable no utiliza fuentes que solo están disponibles en Windows (y especialmente las que solo están disponibles en Vista), ni utiliza 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!
CSS2 ofrece:
@font-face {
font-family: Garamond;
src: url(garamond.eot), url(garamond.pfr);
}
Este es un hilo oportuno; cambiamos a Arial porque Calibri es MUY pequeño en comparación con todas las otras fuentes de respaldo. Me dolió mucho cambiar a (gag) Arial porque es una copia de mierda de Helvetica:
http://www.ms-studio.com/articles.html
Las dificultades de tamaño (demasiado grandes si usa una fuente "c" como su estándar, demasiado pequeñas si va con algo normal) se describen en detalle aquí:
http://neosmart.net/blog/2006/css-vistas-new-fonts/
Extrañaré mucho el hermoso alias de RGB afinado a mano de Calibri, pero fue imposible ofrecer una buena experiencia para la mayoría de los usuarios sin exigir la instalación de Calibri. 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.
IE admite @font-face (comenzó como su tecnología propietaria en MS Word). Aquí hay una publicación del blog del equipo de IE sobre esto hace aproximadamente un mes .
Me imagino que cualquier método de envío de fuentes con una página web supondría algún tipo de riesgo para la 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.
Por supuesto, puede usar SIFR .
Esto se degrada graciosamente en navegadores que no lo admiten y es accesible.
No es realmente adecuado para usar en montones de texto, pero para los títulos y resaltar texto es perfecto.
Por supuesto, esta es una solución a una limitación intrínseca de los navegadores y la web en este momento, pero ¿cuándo no fue así para la mayoría de las tecnologías y técnicas web?
Puede hacerlo con la nueva declaración @font-face disponible en CSS3. También tiene un buen soporte para una característica de CSS3 (es decir, 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 un generador disponible que convierte la fuente a múltiples formatos y crea el CSS apropiado.
Hoy en día, recomendaría proporcionar solo un archivo WOFF; es conveniente, fácil de crear
Además, asegúrese de citar el nombre del formato (por ejemplo, format(''woff'') ); de lo contrario, no funcionará en Firefox.
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 lo explican con más detalle: