Quelle technique de police est utilisée ici?

8

Pendant que j'assistais à cet événement ( http://worldtour.fogcreek.com/ ), j'ai remarqué que cette page avait des polices personnalisées pour la partie Adresse dans le coin supérieur gauche (c'est-à-dire "Fog Creek Software 55 Broadway Fl 55 ....") Quand j'ai regardé le code source, je ne pouvais pas vraiment déterminer ce qu'ils faisaient, mais il remplissait ces conditions:

  1. Fonctionne bien avec IE 7,8 (et tous les autres navigateurs)
  2. Vous permet d'utiliser la police de votre choix
  3. Est-ce une base de texte, c'est-à-dire pas de flash, d'images, etc. Il est donc préférable pour le référencement et l'indexation et autres.

Alors quelle technique utilisent-ils ici ???

seo html css web-development website-design J Lee
la source

Réponses:

13

Ils utilisent la @font-facetechnique. En utilisant une variété de fichiers et une détection de pseudo-navigateur, ils sont capables de servir les polices de manière cohérente dans tous les navigateurs. L'utilisation:

  • True Type et WOFF pour Webkit, Gecko et Opera
  • EOT pour Internet Explorer
  • SVG pour iOS

En raison de la façon dont le CSS est structuré, il vérifiera si la police est disponible localement, si ce n'est pas le cas et c'est IE, il utilisera l'EOT et ne chargera rien d'autre. Et si ce n'est pas IE, il chargera la police dont il aura besoin.

Consultez Font Squirrel pour plus d'informations et le kit @ font-face et un générateur de polices @ font-face et CSS.

Ils utilisent également text-shadowune couleur proche de celle du texte. Cela crée un effet flou sur le texte.

Eli Gundry
la source
2

Ce site utilise une technique de police appelée WOFF (World Open Font Format). Il est en cours de standardisation sur recommandation du W3C. Il permet aux polices d'être directement intégrées dans les pages Web.

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

Lisez. Semble être un concept très intéressant et commence à être largement accepté même s'il était rédigé l'an dernier.

Matthew Brown
la source
1
WOFF seul ne fonctionnera pas réellement sur tous les navigateurs (devinez lequel). C'est pourquoi vous avez besoin d'EOT.
Lèse majesté
2

Consultez également le répertoire des polices de Google, qui est un excellent moyen de commencer à utiliser des polices qui ne sont pas considérées comme "sécurisées pour le Web". Fondamentalement, tout ce que vous avez à faire est d'ajouter une balise de lien de la police appropriée dans le répertoire avant le CSS qui l'utilise. Google déterminera le navigateur via l'agent utilisateur et crachera le CSS de police requis. Vous pouvez ensuite utiliser la police dans la propriété "font-family".

Voici le guide de démarrage rapide: http://code.google.com/apis/webfonts/docs/getting_started.html

kwood
la source