Pourquoi ne pas les Polices Web de Google afficher correctement direct avec la feuille de style @fontface d'utilisation?

Récemment, j'ai eu du mal avec la réalisation lisse Polices Web de Google, principalement sur les Fenêtres de Google Chrome.

J'avais déjà été à l'aide de la directe de la feuille de style de code, extraite à partir de l'URL que Google Web Fonts fournitures, par exemple., Google fournitures:

<link href='http://fonts.googleapis.com/css?family=Titillium+Web:200' rel='stylesheet' type='text/css'>

Donc, je vais à l'URL et utiliser le code suivant

@font-face {
   font-family: 'Titillium Web';
   font-style: normal;
   font-weight: 200;
   src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr-K9kSItTeDn2USN0q77Oh4.woff) format('woff');
}

J'ai pensé que c'était un canular moyen d'économiser un peu plus de vitesse plutôt que de faire une demande à Google, qui s'affiche alors pour faire une autre demande à la source de la police.

J'ai récemment découvert que c'était la cause des problèmes de rendu (voir l'exemple suivant pour comment Windows le navigateur google Chrome s'affiche sur le Web page Police, par rapport à une page de test que j'ai créé à l'aide de la procédure: http://imgur.com/OV2U1,ema2B)

Ma question est, pourquoi le <link /> version faire la police en douceur, quand il est à la recherche de même de la police avec ma méthode abrégée? Et aussi, est-il une raison pourquoi je devrais être à l'aide de cette approche, j'ai pensé permettrait de réduire la demande de fois?

J'utilise Police Écureuil et généralement d'obtenir de bons résultats si vous utilisez de la FTO. Vous pouvez même obtenir la police que vous êtes après, à partir de là, ici.
merci. Utilisez-vous FontSquirrel pour les Polices Web de Google? Plus je m'intéresse à pourquoi cela se produit à tous, voyant que je suis en tirant dans la même ressource.
J'utilise la police de l'écureuil, n'a jamais été un fan de Google fonts. Et, bien sûr, est de simplement fournir une ressource pour vous de prendre un coup d'oeil pour voir si il résolu votre problème, je n'avais pas l'intention de répondre à la question.
J'ai essayé de reproduire le problème (reprenant le code que Google envoie), mais ne pouvait pas: le résultat est OK. Il peut avoir été une erreur intermittente dans Google. Dans tous les cas, vous devriez normalement fournir différents formats de police, comme tous les navigateurs ne comprennent pas WOFF. À l'aide de FontSquirrel, comme le suggère, est une bonne idée et permet d'éviter le problème.

OriginalL'auteur Rhys | 2012-11-21

7

Il ya quelques problèmes qui peuvent répondre à votre question. Le principal est que l'URL lié affiche réellement autre feuille de style CSS pour les différents navigateurs. Donc, si vous l'ouvrir dans google Chrome, et copie CSS, alors il peut ne pas fonctionner dans Internet Explorer (en particulier version antérieure à la version 9).

Aussi, vous utilisez une police de poids de 200, ce qui est un poids "léger". La valeur par défaut de texte de taille ordinaire est de 400. Donc, il ya une petite chance que certains navigateurs ne viennent tout simplement pas la police, sauf si vous spécifiez une police de poids de 200. Quelque chose comme cela devrait vous aider:
```
body {
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
}
```
OriginalL'auteur DisgruntledGoat
1

Ajouter ceci dans votre CSS-fichier:
```
@import url('http://fonts.googleapis.com/css?family=Titillium+Web:200');    
```
Merci. J'utilise actuellement cette @ la méthode d'importation de plus de <lien>, mais plus précisément, je me demande pourquoi cela fait une différence, étant donné que je suis de saisir le même code ce @ import demande de renvoie de toute façon.

OriginalL'auteur MDMDumortier

Vous devez vous connecter pour publier un commentaire.