Chrome svg-Font-Rendering rompt la mise en page

Question

Je suis actuellement en train de travailler sur un petit Projet dans lequel je voudrais utiliser les polices web via @fontface.

J'ai mis en place la police comme ceci:

@font-face {
    font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

Maintenant que vous avez probablement connu Chrome a des problèmes à l'affichage de ces polices dans une manière fluide.

Après quelques recherches, j'ai trouvé une solution qui semble fonctionner: il Vous suffit de déplacer cette partie de la css:

    url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

Si vous vous retrouvez avec ceci:

@font-face {
    font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

Maintenant Chrome rend les Polices d'une manière fluide, ce qui est excellent.

MAIS:

Pour certaines raisons, ça casse PARFOIS la Mise en page. Sur chaque troisième fois que je charge la page, je vais obtenir quelque chose comme ceci:

Tout est déplacé vers la gauche. De plus, les textes sont sortir de leurs contenants. Semble vraiment étrange.

**Quelqu'un a rencontré ce problème avant?

Je serais heureux d'obtenir des conseils sur ce sujet.**

N'hésitez pas à jeter un oeil par vous-même: Vue Fireflycovers.com en ligne

Merci beaucoup!

Answer 1

J'ai eu ce problème précis sur mon propre site Web.

Au lieu de placer le svg en haut, conservez la mise en forme d'origine mais ajoutez une requête multimédia comme indiqué ci-dessous. Cela rendra le rendu parfait des polices par chrome et corrige la rupture de la mise en page.

 @font-face {
   font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'CardoRegular';
        src: url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

    }
}
 

Answer 2

J'ai vu les mêmes problèmes (ou pire) sur quelques sites. La plupart du temps, le texte est écrasé sur lui-même.

Ma seule solution à ce stade est de revenir à l'ancienne police. Vous pouvez également essayer d'ajouter la règle CSS: -webkit-font-smoothing: antialiased; pour une petite amélioration.

Answer 3

Le correctif est dans la duplication de l' @font-face règle.

Vous n'avez pas nécessairement besoin d'elle dans un support de requête dans le Quka de réponse, alors que c'est une façon gentille de ne cibler que les navigateurs webkit.

Si vous dupliquez votre @font-face déclaration exactement comme svg (d'abord pour un meilleur rendu), et de le coller en dessous de l'original, le funky mise en page/dessiner les problèmes ont disparu.

Appeler juste que la requête de média n'est pas l'important ici, c'est la copie de la règle. C'est un bug bizarre. Donc, muette.