Que técnica de fonte está sendo usada aqui?

8

Enquanto eu participava deste evento ( http://worldtour.fogcreek.com/ ), notei que esta página tinha fontes personalizadas para a parte Endereço no canto superior esquerdo (por exemplo, "Fog Creek Software 55 Broadway Fl 55 ....") Quando examinei o código-fonte, não consegui realmente determinar o que eles estavam fazendo, mas atendeu às seguintes condições:

  1. Funciona bem com o IE 7,8 (e todos os outros navegadores)
  2. Permite que você use qualquer fonte que desejar
  3. É base de texto, ou seja, sem flash, imagens, etc. Assim, é melhor para SEO e indexação e tal.

Então, qual técnica eles estão usando aqui ???

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

Respostas:

13

Eles estão usando a @font-facetécnica. Usando uma variedade de arquivos e alguma detecção de pseudo navegador, eles são capazes de fornecer fontes consistentemente em todos os navegadores. O uso:

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

Devido à forma como o CSS é estruturado, ele verifica se a fonte está disponível localmente, se não é e é o IE, usará o EOT e não carregará mais nada. E se não for o IE, ele carregará a fonte necessária.

Confira o Font Squirrel para obter mais informações e kits @ font-face e um gerador de fontes e CSS @ font-face.

Eles também estão usando text-shadowuma cor próxima à do texto. Isso cria o efeito desfocado no texto.

Eli Gundry
fonte
2

Este site usa uma técnica de fonte chamada WOFF (World Open Font Format). Atualmente, ele está sendo padronizado por recomendação do W3C. Permite que as fontes sejam incorporadas diretamente nas páginas da web.

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

Tenha uma leitura. Parece ser um conceito muito interessante e está começando a se tornar amplamente aceito, apesar de ter sido redigido no ano passado.

Matthew Brown
fonte
11
Somente o WOFF não funcionará em todos os navegadores (adivinhe qual). É por isso que você precisa de EOTs.
Lèse majesté 22/11/2010
2

Verifique também o diretório de fontes do Google, que é uma ótima maneira de começar a usar fontes que não são consideradas "seguras para a Web". Basicamente, tudo o que você precisa fazer é adicionar uma tag de link à fonte apropriada no diretório antes do css que a usa. O Google determinará o navegador por meio do agente do usuário e emitirá o css necessário para a fonte. Você pode usar a fonte na propriedade "font-family".

Aqui está o guia de início rápido: http://code.google.com/apis/webfonts/docs/getting_started.html

Kwood
fonte