¿Qué técnica de fuente se está utilizando aquí?

8

Mientras asistía a este evento ( http://worldtour.fogcreek.com/ ) noté que esta página tenía fuentes personalizadas para la parte Dirección en la esquina superior izquierda (es decir, "Fog Creek Software 55 Broadway Fl 55 ...") Cuando miré el código fuente, realmente no pude determinar qué estaban haciendo, pero satisfizo estas condiciones:

  1. Funciona bien con IE 7,8 (y todos los demás navegadores)
  2. Le permite usar cualquier fuente que desee
  3. Es base de texto, es decir, sin flash, imágenes, etc. Por lo tanto, es mejor para SEO e indexación y demás.

Entonces, ¿qué técnica están usando aquí?

seo html css web-development website-design J Lee
fuente

Respuestas:

13

Están usando la @font-facetécnica. Al usar una variedad de archivos y alguna detección de pseudo navegador, pueden servir fuentes de forma consistente en todos los navegadores. El uso:

  • True Type y WOFF para Webkit, Gecko y Opera
  • EOT para Internet Explorer
  • SVG para iOS

Debido a la forma en que está estructurado el CSS, verificará si la fuente está disponible localmente, si no es así y es IE, usará el EOT y no cargará nada más. Y si no es IE, cargará la fuente que necesitará.

Echa un vistazo a Font Squirrel para obtener más información y los kits @ font-face y un generador de fuentes @ font-face y CSS.

También se usan text-shadowcon un color cercano al del texto. Esto crea el efecto borroso en el texto.

Eli Gundry
fuente
2

Este sitio web utiliza una técnica de fuente llamada WOFF (World Open Font Format). Actualmente está siendo estandarizado por recomendación del W3C. Permite que las fuentes se incrusten directamente en las páginas web.

http://en.wikipedia.org/wiki/Web_Open_Font_Format

Tener una lectura Parece ser un concepto muy interesante y está comenzando a ser ampliamente aceptado a pesar de que fue redactado el año pasado.

Matthew Brown
fuente
1
WOFF solo no funcionará en todos los navegadores (adivina cuál). Es por eso que necesitas EOT.
Lèse majesté
2

Consulte también el directorio de fuentes de Google, que es una excelente manera de comenzar a usar fuentes que no se consideran "seguras para la web". Básicamente, todo lo que tiene que hacer es agregar una etiqueta de enlace con la fuente adecuada en el directorio antes del CSS que lo usa. Google determinará el navegador a través del agente de usuario y escupirá el CSS de fuente-cara requerido. Luego puede usar la fuente en la propiedad "font-family".

Aquí está la guía de inicio rápido: http://code.google.com/apis/webfonts/docs/getting_started.html

kwood
fuente