Saltar al contenido

¿Cómo incrustar fuentes en HTML?

Solución:

Las cosas han cambiado ya que esta pregunta se hizo y se respondió originalmente. Se ha realizado una gran cantidad de trabajo para lograr la incrustación de fuentes en varios navegadores para que el texto del cuerpo funcione mediante la incrustación @ font-face.

Paul Irish armó la sintaxis Bulletproof @ font-face combinando intentos de muchas otras personas. Si revisa todo el artículo (no solo la parte superior), permite una sola declaración @ font-face para cubrir IE, Firefox, Safari, Opera, Chrome y posiblemente otros. Básicamente, esto puede alimentar OTF, EOT, SVG y WOFF de manera que no rompa nada.

Recortado de su artículo:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

Trabajando desde esa base, Font Squirrel reunió una variedad de herramientas útiles, incluida la @ font-face Generador que le permite cargar un archivo TTF u OTF y obtener archivos de fuentes convertidos automáticamente para los otros tipos, junto con CSS preconstruido y una página HTML de demostración. Font Squirrel también tiene cientos de kits @ font-face.

Soma Design también creó el Bookmarklet FontFriend, que redefine las fuentes en una página sobre la marcha para que puedas probar cosas. Incluye compatibilidad con arrastrar y soltar @ font-face en FireFox 3.6+.

Más recientemente, Google ha comenzado a proporcionar Google Web Fonts, una variedad de fuentes disponibles bajo una licencia de código abierto y servidas desde los servidores de Google.

Restricciones de licencia

Finalmente, WebFonts.info ha reunido una buena lista wiki de fuentes disponibles para la incrustación @ font-face basada en licencias. No pretende ser una lista exhaustiva, pero las fuentes deberían estar disponibles (posiblemente con condiciones como una atribución en el archivo CSS) para incrustar / vincular. Es importante leer las licencias, porque hay algunas limitaciones que, obviamente, no se imponen en las descargas de fuentes.

Pruebe Facetype.js, convierte su fuente .TTF en un archivo Javascript. Totalmente compatible con SEO, admite FF, IE6 y Safari y se degrada con gracia en otros navegadores.

No, no existe una solución decente para el tipo de cuerpo, a menos que esté dispuesto a atender solo a aquellos con navegadores de última generación.

Microsoft tiene WEFT, su propia tecnología patentada de incrustación de fuentes, pero no he oído hablar de ella en años y no conozco a nadie que la use.

Me las arreglo con sIFR para el tipo de pantalla (titulares, títulos de publicaciones de blog, etc.) y uso una de las fuentes seguras para la web menos desgastadas para el tipo de cuerpo (como Trebuchet MS). Si está aburrido con todas las fuentes seguras para la web, probablemente esté definiendo el término de manera demasiado estrecha: mire esta matriz de fuentes estándar que se envían con los principales sistemas operativos y es probable que pueda encontrar una cascada de fuentes que atrapar a casi todos los usuarios de la web.

Por ejemplo: font-family: "Lucida Grande", "Verdana", sans-serif es una cascada de fuentes común; OS X viene con Lucida Grande, pero aquellos con Windows obtendrán Verdana, una fuente segura para la web con letras de tamaño y forma similares a Lucida Grande. Los usuarios de Linux también obtendrán Verdana si han instalado el paquete de fuentes seguras para la web que existe en la mayoría de los administradores de paquetes de las distribuciones, o de lo contrario recurrirán a un sans-serif ordinario.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *