web-dev-qa-db-fra.com

Quelle technique de police est utilisée ici?

Alors 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 que la base de texte, c’est-à-dire pas de flash, d’images, etc. C’est donc mieux pour le référencement, l’indexation, etc.

Alors, quelle technique utilisent-ils ici ???

seohtmlcssweb-developmentwebsite-design
8
J Lee

Ils utilisent la technique @font-face. En utilisant une variété de fichiers et une détection de pseudo-navigateur, ils sont en mesure de gérer 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 structure du CSS, il vérifiera si la police est disponible localement, si ce n'est pas le cas et que 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.

Découvrez Font Squirrel pour plus d’informations, les kits @ font-face et un générateur de polices @ font-face et CSS.

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

13
Eli Gundry

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 aux pages Web.

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

Avoir une lecture. Cela semble être un concept très intéressant et commence à être largement accepté même s’il était sur le brouillon de l’année dernière.

2
Matthew Brown

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 étiquette de lien avec la police appropriée dans le répertoire avant le css qui l’utilise. Google déterminera le navigateur par l'intermédiaire de l'agent d'utilisateur et crachera le fichier CSS de font-face 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

2
kwood