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 the W3C solution, que ni siquiera funciona en Firefox, y this pretty cool solution. 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.¿Cómo incrustar fuentes en HTML?
Gracias!
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 Irish juntaron Bulletproof @font-face syntax combinando intentos de varias 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.
cortó 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 a partir de esa base, Font Squirrel armar una variedad de herramientas útiles, incluyendo la @font-face Generator que le permite cargar un archivo TTF o SON y obtener ficheros de auto-convertida para los otros tipos, junto con CSS precompilados y una página HTML de demostración. Font Squirrel también tiene Hundreds of @font-face kits.
Soma Design también reunió 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 ha comenzado a proporcionar el Google Web Fonts, una variedad de fuentes disponibles bajo una licencia de código abierto y servidas desde los servidores de Google.
Restricciones de la licencia
Por último, WebFonts.info ha elaborado una lista de wiki'd agradable Fonts available for @font-face embedding 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 obviamente no se adelantan en las descargas de fuentes.
Creo que vale la pena destacar que no se le permite automáticamente tomar una fuente y @ font-face -ize, incluso si ha comprado una licencia de esa fuente legalmente y por un montón de dinero. Debe verificar la licencia de la fuente para saber si ese tipo de redistribución electrónica está permitida o no. Las infracciones son tan fáciles de detectar y de arrastre, que de lo contrario puede haber problemas fácilmente, especialmente si usted es una compañía situada en la jurisdicción correcta. –
FontSquirrel aclara este punto tanto en sus kits de fuentes precompilados como en su generador (que requiere que verifique que las fuentes estén realmente autorizadas para tal uso). Existen otras herramientas de conversión, pero no sé cuáles son las razones para hablar de licencias. – fencepost
Revisé para aclarar esto en mi respuesta. – fencepost
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 un tiempo back.
Oye, estaba a punto de publicar ese enlace, en lugar de votar. – Kris
Pregunté esto a while back. La respuesta es básicamente que no funciona. :(
cierto, gracias por la referencia! –
No, no es una solución decente para el tipo de cuerpo, a menos que esté dispuesto a atender sólo a aquellos con los navegadores con efectos de iluminación.
Microsoft tiene WEFT, su propia tecnología patentada font-incrustación , pero no lo he oído hablar en años, y no conozco a nadie que lo use.
Me las arreglo con sIFR para tipo de visualización (titulares, títulos de publicaciones en blogs, etc.) y usando una de 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 estrictamente: mira this matrix of stock fonts que se envía con sistemas operativos principales y lo más probable es que ' Podré 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 fuente 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.
Permítanme estar de pie en la tribuna durante un minuto: aunque me gustaría que Windows tuviera más "buenas" fuentes (OS X tiene los mejores éxitos de la historia de la tipografía: Futura, Helvetica, Gill Sans, etc.), es bueno que tenemos que contenernos a nosotros mismos al elegir fuentes. La libertad también puede usarse para el mal. – savetheclocktower
No hay comentarios en tu comentario, pero gracias por la respuesta. Eso es genial. ¿Hay una lista de cascadas en alguna parte? Gracias de nuevo. –
Aquí hay una lista: (http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html). Es conservador, solo enumera las fuentes que son idénticas (o casi) en todas las plataformas. Es posible que tenga que hacer una comparación para ver qué fuente "segura" se parece más a su fuente "arriesgada". – savetheclocktower
Pruebe Facetype.js, convierta su fuente .TTF en un archivo Javascript. Compatible con SEO completo, admite FF, IE6 y Safari y se degrada graciosamente en otros navegadores.
Muy muy bueno. Lo revisaré. –
Para quienes se preguntan cómo funciona, usa la etiqueta canvas (html 5) o VML. –
Tendría que estar de acuerdo con esta solución, parece extremadamente simple y parece estar funcionando en todos los navegadores que le ofrezco. – askon
Echa un vistazo a Typekit, una opción comercial (también tienen un paquete gratuito disponible).
Utiliza diferentes técnicas según el navegador que se esté utilizando (@font-face frente al formato EOT), y ellos se encargan también 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:
X-Ref [Cómo añadir un poco de fuentes no estándar a un sitio web?] (Http://stackoverflow.com/q/107936/367456) – hakre
posible duplicado de [Fuentes en la Web] (http://stackoverflow.com/questions/16233/fonts-on-the-web) – user2284570
@ user2284570 Esta pregunta tiene un mejor responder. Cerré el otro como duplicado de esto. –