Les polices de Google ne sont pas rendues sur Google Chrome

Question

Les polices de Google ne sont pas rendues sur Google Chrome

Demandé el 25 de Février, 2014: Quand la question a-t-elle été
23604 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis en train de construire un nouveau thème WordPress (je ne sais pas si c'est pertinent) et il y a cette question qui garde m'énerve.

J'ai chargé Roboto la Dalle de Google Webfonts (inclus le CSS en <head> section). Sur tous les autres navigateur là, la police est rendu OK, sauf Google Chrome. Quand j'ai d'abord charger le site web dans Google Chrome, textes à l'aide personnalisé de la police ne sont PAS affichés À TOUS (même tho font-stack a la Géorgie comme un secours - "Roboto Slab", Georgia, serif;). Après je survole le style de lien ou de prolonger toute propriété CSS dans l'Inspecteur - textes deviennent visibles.

Depuis que j'ai commencé le thème il y a quelques temps, je me souviens très clairement qu'elle fonctionnait parfaitement avant. Ce n'est connue récente mise à jour de Chrome bug?

La première charge: une capture d'écran #1

Après je réappliquer toutes les propriétés CSS, entrer dans réactive vue ou planent un élément: une capture d'écran #2

Quelqu'un a le même problème? Comment dois-je procéder?

Merci!

Demandé el 25 de Février, 2014 par enodekciw

Answer 1

5 Réponses

Answer 2

89voto

Meg Points 993

Apparemment, c'est un bug connu de Chrome . Il existe une solution de contournement CSS uniquement qui devrait résoudre le problème:

 body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

Il semble que Chrome a simplement besoin de dire de repeindre le texte.

Répondu el 25 de Février, 2014 par Meg (993 Points )

Answer 3

9voto

kjetilh Points 2979

Le correctif CSS n'a pas fonctionné pour moi, le script de délai de 0,5 seconde semble gênant.

Cet extrait JS semble fonctionner pour nous:

 <script type="text/javascript">
jQuery(function($) {
    if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
        $('body').css('opacity', '1.0') 
    }
})
</script>

Répondu el 25 de Mars, 2014 par kjetilh (2979 Points )

Answer 4

7voto

Andrew Points 187

Essayé le correctif css seul ci-dessus sans succès. Enfin résolu en créant une feuille de style (chrome.css) contenant:

 body {
 -webkit-animation-delay: 0.1s;
 -webkit-animation-name: fontfix;
 -webkit-animation-duration: 0.1s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-timing-function: linear;
}

@@-webkit-keyframes fontfix {
 from { opacity: 1; }
 to   { opacity: 1; }
}

Et en le chargeant avec jQuery au bas de la page:

 <script type="text/javascript">
   $(document).ready(function () {
      $('head').append('<link href="http://stackoverflow.com/chrome.css" rel="stylesheet" />');
   });
</script>

Répondu el 4 de Avril, 2014 par Andrew (187 Points )

Answer 5

2voto

Nate Points 21

J'ai intégré le CSS en dessus ... mais je suis AUSSI y compris le code javascript suivant dans l'en-tête:

(Remarque, je sais que je n'ai pas de personnaliser les polices de caractères dans le code ci-dessous. Mais peu importe, il semble encore pour aider à forcer le Chrome de repeindre les polices sur la page ... juste assurez-vous que vos polices sont correctement référencés)

Avec le CSS mentionné ci-dessus est utilisé en conjonction avec le code ci-dessous inclus dans mon ... au pire, toutes les polices sur ma page va s'afficher après une seconde de retard.

Espérons que cela aide les gens. Des acclamations.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">

 $(function() { $('body').hide().show(); });
</script>


<script type="text/javascript">

//JavaScript goes here


WebFontConfig = {
  google: { families: ['FontOne', 'FontTwo'] },
    fontinactive: function (fontFamily, fontDescription) {
   //Something went wrong! Let's load our local fonts.
    WebFontConfig = {
      custom: { families: ['FontOne', 'FontTwo'],
      urls: ['font-one.css', 'font-two.css']
    }
  };
  loadFonts();
  }
};

function loadFonts() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
}

(function () {
  //Once document is ready, load the fonts.
  loadFonts();
  })();

</script>

Voici où j'ai trouvé la-dessus: https://productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso

Répondu el 2 de Mars, 2014 par Nate (21 Points )

Answer 6

1voto

Conor O Kelly Points 11

Je l’ai corrigé avec la solution JS, mais je devais aussi utiliser la dernière version de jquery (1.11) hébergé sur Google pour le réparer.

Répondu el 1 de Avril, 2014 par Conor O Kelly (11 Points )

Les polices de Google ne sont pas rendues sur Google Chrome

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Les polices de Google ne sont pas rendues sur Google Chrome

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: