@font-face svg ne fonctionne pas correctement dans google Chrome?
J'ai un problème avec une police spécifique et la façon dont il est rendu dans le navigateur Chrome.
Firefox affiche la police correctement grâce à l'utilisation de ttf.
Chrome ne pas utiliser antialias et que la police est trop "forte" et laid.
C'est le css de la déclaration que j'ai utilisé
@font-face {
font-family: 'HelveticaNeueLT Std Thin';
src: url(../fonts/h2.eot);
src: url(../fonts/h2.svg#test) format('svg'),
url(../fonts/h2.woff) format('woff'),
url(../fonts/h2.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
Je suis venu à la conclusion que le problème est avec le svg déclaration/fichier de police.
Si je n'utilise pas la balise hash et de la laisser seule .svg, il rend l'anticrénelage mais à une autre hauteur de la ligne, avec un peu hors de positionnement. Si je peux ajouter .svg#quoi que ce soit, il n'a pas d'anticrénelage à tous et semble laid.
Toutes les suggestions sont les bienvenues pour m'aider à résoudre ce problème ennuyeux.
PS: Windows anticrénelage est OK, j'ai testé cette. J'ai aussi essayé le @media screen and (-webkit-min-device-pixel-ratio:0)
déclaration pour le svg police, sans succès.
Je réalise que j'ai peut-être un repost, mais après avoir essayé toutes les solutions des questions, je suis un peu désespérée.
il est appelé un certain nombre de signer
OriginalL'auteur Radu Cojocaru | 2013-03-15
Vous devez vous connecter pour publier un commentaire.
Pour obtenir webfonts à rendre avec la bonne antialias dans google Chrome sur Windows, vous devez utiliser ce format dans la déclaration de police:
Fondamentalement, vous avez besoin de la force de google Chrome pour utiliser le SVG, le format de la police. Vous pouvez le faire en déplaçant l'url de la .la version svg vers le haut, cependant Chrome sur Windows a eu des problèmes avec le désordre de la mise en page lors de cette opération (jusqu'à et y compris la version 30). En remplaçant la déclaration de police à l'aide d'une requête des médias, ces problèmes sont résolus.
Aussi: Parfois la position de référence n'a pas de correspondance entre les polices OpenType et SVG polices de caractères, mais vous pouvez l'ajuster en modifiant simplement le SVG fichiers de police. SVG polices sont à base de xml et si vous regardez la déclaration
Vous pouvez modifier la valeur de l'ascension et obtenir qu'il corresponde à l'autre format de police versions.
ascent
de la valeur à partir de 1638 à 1900 et bam, tous les fixes. Merci beaucoup! Voteriez-vous 10 si je le pouvais. 😉Devinez quoi? Cette astuce ne fonctionne plus sur IE11.
Qui en font partie?
IE11 rapports comme webkit. SVG polices ne fonctionnent pas pour IE toutefois, ce qui signifie que vous êtes foutu.
Cette réponse est obsolète - Chrome ne prend pas en charge le format SVG (depuis 2015)
OriginalL'auteur Supercranky
Lily et la police écureuil suggèrent, votre SVG font presque toujours au bas de votre liste de
@font-face
sources. Vous ne voulez pas un navigateur pour utiliser une SVG de police, à moins que ça ne peut pas utiliser quoi que ce soit d'autre.La raison pour cela est que SVG polices sont très mal pris en charge, et le support est en baisse. Comme de ce post (en 2015), SVG polices sont n'est plus pris en charge par Chrome (38) et ne sont pris en charge par Safari 8, iOS Safari 8.1 et le navigateur Android 37. http://caniuse.com/#feat=svg-fonts
Edit: Février 2016, Android Browser 47 ne prend plus en charge les polices SVG. Safari et iOS Safari supporte encore, et semblent l'être les seuls navigateurs qui ne.
OriginalL'auteur Luke
Lors du référencement de fichiers SVG en @font-face à l'id (#) dans le chemin d'accès du fichier est la spécification de l'élément à l'intérieur de l' .fichier svg. Pour trouver le bon id, vous pouvez l'ouvrir dans un éditeur et d'inspecter le
<font>
tag.Par exemple:
concerne:
<font id="latobold" horiz-adv-x="1187" >
OriginalL'auteur Adam Sheridan
Police Écureuil webfont générateur organise leur
@font-face
CSS comme ceci:Plus d'informations sur pourquoi l'ordre est important ici: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
Si c'est encore le problème, essayez d'utiliser ladite générateur, choisissez l'EXPERT de l'option, et jouer avec les différents paramètres (en particulier en vertu de Rendu et X hauteur).
OriginalL'auteur Lily
essayer cette @font-face à la mise en œuvre
pour plus d'informations, consultez cet exemple https://github.com/ttibensky/BulletProof-font-face-implementation
OriginalL'auteur Tomáš Tibenský