@font-face anti-aliasing sur windows et mac

J'ai utilisé http://www.fontsquirrel.com/ pour créer un @font-face kit.

Il fonctionne très bien, mais le résultat sur windows est différent du résultat sur mac.

Sur windows, la police semble avoir un faux anti-aliasing:

@font-face anti-aliasing sur windows et mac c'est le résultat sur Mac avec FF, Chrome ou Safari (toutes les mises à jour pour la dernière version).

c'est le résultat sur Windows avec FF ou Chrome.

Comme vous pouvez le voir, le résultat n'est pas le même. Sur Windows, la police est plus épais et plus rugueux.

Comment puis-je résoudre ce problème?

InformationsquelleAutor pasine | 2010-10-30

8

Cela ressemble à la normale laid façon dont les polices sont rendus dans WinXP. Certains (OMI: erronées) personnes préfèrent même il.

Pour obtenir de l'anti-aliasing pour les ordinateurs de bureau des polices en général sur XP, vous devez l'allumer, de Propriétés d'Affichage -> Apparence> Effets -> Utiliser la méthode suivante pour lisser les bords des polices d'écran -> ClearType. Le paramètre par défaut “Standard” est de la vieille école Windows “police bavures” de la technique que seule la peine de tourner sur à de plus grandes tailles de police, et puis en fait souvent un gâchis.

IE7+ dispose d'une option par défaut—pour toujours utiliser ClearType anti-aliasing pour le rendu des polices dans le navigateur web. D'autres navigateurs web égard de l'utilisateur configuré méthode de rendu des polices. C'est une honte que de nombreuses personnes ont encore cet avantage paramètre désactivé, mais il n'est pas vraiment votre problème.

(Il est méchant hack pour faire de Chrome effectuer certains anti-aliasing sur le texte, qui est:
```
text-shadow: 0px 0px 1px rgba(0,0,0,0);
```
mais j'ai sérieusement ne le recommande pas.)

Une chose que vous pouvez faire lorsque “Utiliser la méthode suivante...” est réglé sur “Standard”, pour essayer de faire la police obtenir certains de l'anti-aliasing, est de vérifier que la police en question ne dispose pas d'un GASP racontait à l'ancienne TrueType convertisseurs pour désactiver l'anti-aliasing en particulier les tailles de police. Vous pouvez modifier le GASP table à l'aide d'un éditeur de polices ou avec la ttfgasp.exe outil de ligne de commande.
- J'ai essayé d'activer ClearType sur Windows, mais le problème persiste. Je suis la vérification de la GASP tableau, mais: voyez-vous d'autres solutions? pensez-vous que l'utilisation d'un autre type de police (woff, eot, svg, etc..) peut changer quelque chose?
- Je ne crois pas, non. Convertir les contours de Type 1 format beziers à la place de la TTF splines peuvent faire une différence pour le moteur de rendu utilisé pour les non-ClearType lissage des polices, mais c'est un assez drastique étape. Pouvez-vous mettre à la police quelque part, à vérifier? Ah, autre chose: le surprenant rendu se produire partout vous utilisez la même police, même dans une simple page de test? Il y a d'autres raisons de l'anti-aliasing pouvez obtenir éteint, en particulier lorsque vous utilisez un IE filter style (généralement à reproduire opacity).
- La police Myriad Pro (qui est une police de caractères standard sur un Mac, mais pas sur de Gagner). Si vous voulez je peux H vous le site que je suis en développement, de sorte que vous pouvez voir en direct.
- OK, mais gardez à l'esprit que le Mac-livré Myriad n'est pas homologué pour web embedding. Si je comprends bien, pour le moment, le seul moyen légal d'intégrer Myriade est par Typekit.
- Je n'avais pas considéré la question juridique. Je vais les remplacer par des images ou d'utiliser une autre police. Merci pour votre grande aide!
- Il m'aide à résoudre l'anti-aliasing problème: stackoverflow.com/a/13366787/1002639
InformationsquelleAutor bobince
48

Moi aussi, j'ai été aux prises avec ce sur Chrome et je pense que je viens de trouver la réponse!

Chrome n'aime pas la valeur par défaut fontsquirrel.com CSS généré.
```
@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.eot');
    src: url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_styles/hlc/hl-webfont.woff') format('woff'),
         url('/_styles/hlc/hl-webfont.ttf') format('truetype'),
         url('/_styles/hlc/hl-webfont.svg#HLC') format('svg');
    font-weight: normal;
    font-style: normal;
}
```
À corriger, j'ai déplacé le SVG ligne:
```
url('/_styles/hlc/hl-webfont.svg#HLC') format('svg')
```
en haut de la liste. Maintenant, je vois de lissage des polices! Je suppose que Chrome veut être le premier...
```
/* THIS WORKS FOR ME */
@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.eot');
    src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
         url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_styles/hlc/hl-webfont.woff') format('woff'),
         url('/_styles/hlc/hl-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
```
Espère que ça marchera pour vous aussi. Profitez-en!
- Ce qui a résolu mon problème! Merci!
- Je l'aide a été Ouvert Sans à partir de google web fonts et après la lecture de cet vérifié ce que les polices ont été inclus dans le package. Il retourne uniquement le fichier woff je suis donc allé à fontsquirrel, téléchargé le paquet et appliqué le correctif, il a travaillé! C'est bizarre, parce que sur google web fonts site ils souffrent de l'absence d'anti-aliasing ainsi.
- ne fonctionne pas..la Version Chrome 22.0.1229.94 m
- n'a pas fonctionné pour moi, Version 23.0.1271.64 m
- Ouais, cette habitude de travailler avant; jusqu'à la version 18 ou 19 je pense que, maintenant, il rend SVG texte de la même manière, il rend le texte normal. 🙁
- Je n'ai pas vu de changements dans les sites mon site sur google Chrome Version 23.0.1271.64 m. Hésitez pas à me PM, je ne me dérangerait pas de prendre un coup d'oeil à les essayer et de les dupliquer et de les aider avec le problème.
- Il fonctionne très bien pour moi, la version 25.0.1364.152 m et les polices KaushanScript et Ubuntu.
- A parfaitement fonctionné pour moi dans google chrome sous windows, avec firefox, pas trop.
- Perfect fix, merci pour cette! Écoute-moi pendant des jours!
- C'était cassé dans V22/23 mais il a été fixé une fois de plus. Toute personne utilisant une version moderne sera d'accord avec cette solution. Vérifié de travail dans les 29, 30, 31, et le plus récent de 32.
- L'utilisation du format SVG tout le temps n'est pas la meilleure façon, depuis SVG manque d'informations incomplètes. Sans présager de la police semble plus floue que jamais sur les systèmes avec la police de lissage activé. Donc j'ai écrit un petit script appelé la Police Smoothie, qui détecte si la police-le lissage est activé et corrige le CSS si nécessaire. J'ai également créé une webfont générateur appelé Fontie, qui est un fto ou ttf et génère un package avec une bonne allusion webfonts, CSS et Police Smoothie pour vous.
InformationsquelleAutor maximo
14

Je suis surpris que personne n'en a parlé. Appliquez une légère -webkit-texte-avc fait le truc pour moi quel que soit le format (extension) de la police que vous utilisez. Certains préconisent une -webkit-texte-avc: 1px mais pour moi, il modifie la police de l'air trop bien (trop fort). Mais un 0,5 px on fait la course presque imperceptible et il tourne sur l'antialiasing:
```
-webkit-text-stroke: 0.5px;
```
Mettre dans votre css définition de balise html et vous avez terminé!
- Ne fonctionne pas pour moi ici (Chrome 24 / Win XP / ClearType désactivé).
- Quels sont les effets sur le présent dans les Os comme OSX qui rendent la police correctement par défaut? Il va les rendre encore plus fort?
- Fonctionne sur Chrome 26.0.1410.64 Windows 7 ClearType activé. Mais c'est encore un hack. Pas la même police plus.
- J'ai récemment eu des problèmes avec la définition d'un avc de texte mondiale lors du travail avec les mobiles des menus déroulants à l'aide de jQuery car il provoque parfois un "décalage" dans la slideDown/slideUp/slideToggle effets, donc je suis un peu prudent sur l'utilisation de cette méthode css maintenant.
InformationsquelleAutor Pere
4

Il existe également une police appelée Vegur qui ressemble à Myriad Pro mais est légal à intégrer dans un site web.
Espérons que ça aide!
- +1 il ya beaucoup de polices de caractères qui ressemblent à une Myriade de, ou plutôt Frutiger, qui est la police Myriad a été "influencée" par. “Humaniste sans qui ressemble Frutiger” est presque un genre de son propre maintenant!
InformationsquelleAutor Maximilian Motel
3

J'ai fait une petite recherche, et j'ai trouvé un hack qui, je pense, fait une différence. Mettez ceci dans votre CSS avec votre police de caractères variables:
```
-webkit-transform: rotate(-0.0000000001deg);
```
Ainsi, je trouve plein sur le noir (#000000) n'aide pas les choses. À l'aide d'une très sombre semblait m'aider.
- Pour moi, le lissage automatique ne s'applique pas jusqu'à ce que rotate(-0.03deg). Aussi, dans la Toile que vous pouvez faire setTransform(1, 0.001, 0, 1, 0, 0) et également obtenir antialised.
- Mise à jour: plus de travail en Chrome 15.0.874.106 m. Bien qu'il fonctionne dans IE9 et Firefox
InformationsquelleAutor Sparky

C'est le code de la gi à l'aide de fixer "Chrome problème de rendu":

@font-face {
    font-family: 'fontname';
    src: url('fonts/fontname.eot');
    src: url('fonts/fontname.eot') format('embedded-opentype'),
    url('fonts/fontname.svg') format('svg');
}

/*if mozilla*/
@-moz-document url-prefix() { 
    @font-face {
        font-family: 'fontname';
        src: url('fonts/fontname.ttf') format('truetype');
    }
}

🙂 il fonctionne pour moi...ENFIN!!!

InformationsquelleAutor apofiSSo

2

Changement de paramètre dans Windows ou un navigateur lui-même n'est pas une solution. Lorsque vous utilisez @font-face, vous voulez de la police de l'air sympa sur chaque écran dans tous les navigateurs, et pas seulement dans le vôtre.

Le truc avec
```
text-shadow: 0 0 1px rgba(255,255,255,0.1);
```
ou
```
-webkit-transform: rotate(-0.0000000001deg);
```
ne fonctionne plus en Chrome 16.0.912.63 m, Windows Vista.

Je ne pouvais pas trouver un moyen de surmonter ce problème bien que.
- Fonctionne pour moi sur Windows 7
InformationsquelleAutor Lubo Zviera
0

-webkit-transform: rotate(-0.0000000001 deg);

Mise à jour: plus de travail en Chrome 15.0.874.106 m. Bien qu'il fonctionne dans IE9 et Firefox – >Zequez 4 Nov à 15:28

Mise à JOUR: C'est le travail (au moins pour moi) en Chrome 15.0.874.121 m.

IE9 et Firefox ne devriez pas en avoir besoin, ou être ciblés par elle depuis le sélecteur indique -webkit-.

InformationsquelleAutor Matt Williams

Vous devez vous connecter pour publier un commentaire.