Pregunta ¿Cómo incrustar fuentes en HTML?


Estoy tratando de encontrar una solución decente (especialmente desde el lado de SEO) para incrustar fuentes en páginas web. Hasta ahora he visto la solución W3C, que ni siquiera funciona en Firefox, y esta solución genial. La segunda solución es solo para títulos. ¿Hay una solución disponible para texto completo? Estoy cansado de las fuentes estándar para páginas web.

¡Gracias!


75
2017-10-20 22:57


origen


Respuestas:


Las cosas han cambiado ya que esta pregunta fue originalmente hecha y respondida. Se ha realizado una gran cantidad de trabajo para obtener la incrustación de fuentes entre navegadores para que el texto del cuerpo funcione con la incrustación @ font-face.

Paul irlandés juntos A prueba de balas @ sintaxis de la fuente combinando intentos de muchas otras personas. Si revisas el artículo completo (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 forma que no rompa nada.

Cortado 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 armar una variedad de herramientas útiles, incluida la @ font-face Generator que le permite cargar un archivo TTF o OTF y obtener archivos de fuente convertidos automáticamente para los otros tipos, junto con CSS precompilados y una página HTML de demostración. Font Squirrel también tiene Cientos de kits de @ font-face.

Soma Design también armó el FontFriend Bookmarklet, que redefine las fuentes en una página sobre la marcha para que pueda probar las cosas. Incluye soporte para drag-and-drop @ font-face en FireFox 3.6+.

Más recientemente, Google comenzó a proporcionar la 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 creado una buena lista wiki de Fuentes disponibles para la inserción de @ font-face basado en licencias No pretende ser una lista exhaustiva, pero las fuentes deben estar disponibles (posiblemente con condiciones tales como una atribución en el archivo CSS) para incrustación / vinculación. Es importante leer las licencias, porque hay algunas limitaciones que no se avanzan obviamente en las descargas de fuentes.


126
2017-12-27 22:27



Tratar Facetype.js, convierte su fuente .TTF en un archivo Javascript. Compatible con SEO completo, admite FF, IE6 y Safari y se degrada graciosamente en otros navegadores.


9
2018-02-15 11:22



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

Microsoft tiene TRAMA, su propia tecnología propietaria de incrustación de fuentes, pero no la he escuchado hablar en años, y no conozco a nadie que la use.

Me las arreglo con sIFR para el tipo de visualización (titulares, títulos de publicaciones en blogs, etc.) y el uso de una de las fuentes web seguras menos usadas para el tipo de cuerpo (como Trebuchet MS). Si estás aburrido con todas las fuentes seguras para la Web, probablemente estés definiendo el término demasiado estrechamente: mira esta matriz de fuentes comunes ese barco con sistemas operativos principales y es probable que pueda encontrar una cascada de fuentes que atrape 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 similar a Lucida Grande. Los usuarios de Linux también obtendrán Verdana si han instalado el paquete de fuentes seguro para la Web que existe en la mayoría de los gestores de paquetes de las distros, o bien recurrirán a un sans-serif ordinario.


6
2017-10-20 23:17



Y es poco probable también - EOT es un formato bastante restrictivo que solo es compatible con IE. Tanto Safari 3.1 como Firefox 3.1 (y el alfa actual) y posiblemente Opera 9.6 soportan la incrustación de fuentes de tipo verdadero (ttf), y al menos Safari admite fuentes SVG a través del mismo mecanismo. Una lista aparte tuvo una buena discusión sobre esto durante un tiempo espalda.


4
2017-10-20 23:06



Revisa Typekit, una opción comercial (también tienen un paquete gratuito disponible).

Utiliza diferentes técnicas según el navegador que se utilice (@font-face vs. EOT formato), y también se ocupan de todos los problemas de licencias de fuentes. Es compatible con todo hasta IE6.

Aquí hay más información sobre cómo funciona Typekit:


3
2017-12-27 22:29



Pregunté esto hace un tiempo. La respuesta es básicamente que no funciona. :(


2
2017-10-20 23:17