Chrome svg-Font-Rendu des sauts de Mise en page

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 d'une manière fluide.

Chrome svg-Font-Rendu des sauts de Mise en page

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');

Donc vous retrouver 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 quelque raison que ce casse PARFOIS la Mise en page. Sur chaque troisième fois que je charge la page, je vais obtenir quelque chose comme ceci:

Chrome svg-Font-Rendu des sauts de Mise en page

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!

  • J'aime votre chien et de la requête de média ascii art
  • Haha, merci Chris 😀
  • Je reçois ce type de problème sur Chrome + Windows 8. La raison que les choses changent, c'est que tous les calculs de largeur pour la mise en page semble être hors, en faisant des conteneurs beaucoup plus petits que ce qu'ils devraient être.
InformationsquelleAutor Arrowcatch | 2012-12-02
  1. 78

    J'ai eu exactement ce problème de se produire à un site web de mon propre.

    Au lieu de mettre le svg en haut, garder la mise en forme d'origine, mais d'ajouter une requête de support comme indiqué ci-dessous. Cela rendra chrome rendre les polices parfaitement et les correctifs de la mise en page de rupture.

    @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');

    }
}
    • Cela doit beaucoup plus d'attention! Semble bien fonctionner pour moi jusqu'à présent.
    • Comment/pourquoi en serait-il fait aucune différence?
    • il ne fonctionne pas sur windows mobile
    • Cela fonctionne bien. @Pointu, le dernier format pris en charge dans la source de commande est utilisé, de sorte que le SVG va se substituer à l'WOFF toute façon. Je pense que c'est peut être une faute de frappe dans l'original de l'extrait.
    • ce correctif est spécifiquement conçu pour les navigateurs Webkit, pas de Windows Mobile.
    • Je soupçonne qu'il résulte également dans le WOFF fichier en cours de téléchargement, même si elle n'est pas utilisée, ce qui est indésirable.
    • oui, je suis sûr que vous avez raison à ce sujet. C'est un compromis entre le visible de l'onctuosité et de la performance, au moins jusqu'à ce que Webkit/Blink peut rendre les polices TrueType avec anti-aliasing.
    • Pour une raison que chrome n'a pas rendu une svg avec # ajouté dans mon cas, après avoir enlevé le hashtag de la partie, il a commencé à travailler 🙂 mon .02
    • vous êtes l'HOMME de la! C'est un problème bizarre pour moi, car il n'était même pas présent tout le temps, apparaît un peu tous les 200e fois que je l'actualisation, mais il ne serait pas aller loin jusqu'à ce que j'ai vider le cache et l'historique. Cette version corrige de façon permanente, une grande pensée (ne pas les soins qu'elle tire le fichier woff ainsi, ça vaut le coup).
    • merci! C'était vraiment utile.
    • La src liste pour une police de la déclaration n'est pas le dernier police valide, c'est le premier qui valide la police. À partir de la spécification: "Lorsqu'une police est nécessaire, l'agent utilisateur effectue une itération sur l'ensemble des références citées, à l'aide de la première, il peut activer avec succès." dev.w3.org/csswg/css-fonts/#descdef-src

    InformationsquelleAutor Quka
  2. 2

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

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

    InformationsquelleAutor Khan
  3. 0

    Le correctif est dans la duplication de la @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.

    InformationsquelleAutor Dan Tello