javascript - texto - mostrar codigo html sin que se ejecute

¿Cómo incrustar fuentes en HTML?

Question

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 es una 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!

Answer 1

Eche 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 vs. EOT format), 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:

• http://forabeautifulweb.com/blog/about/first_impressions_of_typekit
• http://www.sitepoint.com/blogs/2009/06/01/web-fonts-get-real-with-typekit/

Answer 2

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

Answer 3

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 WEFT , 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 de manera demasiado restrictiva: mira esta matriz de tipos de letra que vienen con sistemas operativos principales y es probable que encuentres 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 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.

Answer 4

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.

Answer 5

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 hace un tiempo.

Answer 6

Las cosas han cambiado desde 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 armó la sintaxis Bulletproof @ font-face 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 reunió una variedad de herramientas útiles, incluido el generador @ font-face que le permite cargar un archivo TTF o OTF y obtener archivos de fuentes de conversión automática para los otros tipos, junto con CSS preconstruidos y una página HTML de demostración. Font Squirrel también tiene cientos de kits de @ font-face .

Soma Design también reunió 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 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 incorporación @ font-face basada 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 promueven en las descargas de fuentes.