web-dev-qa-db-fra.com

Chrome svg-Font-Rendering rompt la mise en page

Je travaille actuellement sur un petit projet dans lequel j'aimerais utiliser webfonts via @fontface.

J'ai implémenté 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;

Comme vous l'avez probablement déjà vu, Chrome rencontre des difficultés pour afficher ces polices de manière fluide.

Chrome font rendering problems

Après quelques recherches, j'ai trouvé une solution qui semble fonctionner: vous déplacez simplement cette partie du fichier css:

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

Donc 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 affiche les polices de manière fluide, ce qui est excellent.

MAIS:

Pour certaines raisons, cela rompt parfois la mise en page. À peu près chaque troisième fois que je charge la page, je vais obtenir quelque chose comme ceci:

Chrome Font problems

Tout est déplacé vers la gauche. Des textes plus longs sortent de leurs conteneurs. Ça a l'air vraiment étrange.

** Quelqu'un at-il déjà rencontré ce problème?

Je serais heureux de recevoir des conseils à ce sujet. **

N'hésitez pas à regarder par vous-même: View Fireflycovers.com online

Merci beaucoup!

google-chromelayoutfontssvgfont-face
29
Arrowcatch

J'ai eu cette question exacte arriver à un site Web de mon propre.

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 corrigera le bris de 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');

    }
}
78
Quka

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 sur le point est de revenir à la police plus ancienne. Vous pouvez également essayer d’ajouter la règle CSS: -webkit-font-smoothing: antialiased; pour une petite amélioration.

2
Khan

Le correctif se trouve dans la duplication de la règle @font-face.

Vous n'en avez pas nécessairement besoin dans une requête multimédia dans la réponse de Quka, bien que ce soit un moyen agréable de ne cibler que les navigateurs Webkit.

Si vous dupliquez votre déclaration @font-face exactement comme (svg d'abord pour un meilleur rendu) et que vous la collez sous l'original, les problèmes de mise en page/dessin funky disparaissent. 

Il suffit d'appeler que la requête des médias n'est pas importante ici: c'est la règle dupliquée. C'est un bug si étrange. Si bête.

0
Dan Tello