CSS pile de polices de substitution des problèmes dans Outlook lors de l'utilisation de Google Webfonts
À l'aide de Google Webfonts dans un e-mail HTML, j'ai couru dans la substitution de polices de problèmes dans Outlook (2007,2010, etc.) qui ne s'est pas produit avant d'incorporer les polices web.Il ignore les piles de polices et va droit à la Fois.
Cela se produit en dépit de l'utilisation inline police de secours des piles.
J'ai remarqué des problèmes similaires qui ont été posté ici avant, mais seulement comme une question d'ordre général, ne sont pas liés à l'utilisation de polices web. Auparavant, tous les de la police de base a fonctionné correctement. Je suis l'aide de Tournesol à la conduite de l'e-mail de test.
Personne ne sait pourquoi ce qui se passe?
Lien au Tournesol: https://litmus.com/pub/53a33c7/screenshots
Liée à l'origine des polices dans le CSS comme ceci:
<link href='http://fonts.googleapis.com/css?family=Arvo|Droid+Serif:400,700,400italic,700italic|Roboto:300' rel='stylesheet' type='text/css'>
J'ai aussi essayé d'utiliser @font-face et auto hébergé les fichiers après avoir vu une possible la solution dans une autre réponse, mais il ne fonctionne pas (j'ai mis à jour les noms de classe trop):
À l'exception de la police face à la tentative de solution de contournement:
<!--[if !mso]><!-->
@font-face {
font-family: 'droid_serif';
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot');
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.svg#droid_serif') format('svg'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.woff') format('woff'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
<!--<![endif]-->
Spécifiques à Outlook remplacer CSS semble fonctionner, mais il y a des questions prioritaires. Je ne crois pas Outlook reconnaît le !déclaration importante, j'ai donc travaillé à la plus des sélections spécifiques. Cependant, je ne comprends toujours pas pourquoi ce qui se passe et si il y a un simple correctif.
Outlook Police Remplacer Extrait:
<!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
h1 { font-family: 'Georgia',serif !important; font-weight:normal; }
h1 a { font-family: 'Georgia',serif !important; font-weight:normal; }
h2 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; font-weight:normal; }
h3 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; }
.cover,img.cover,a.cover {
display: block;
visibility: visible;
td { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; }
.droid { font-family: 'Georgia', serif; }
}
</style>
<![endif]-->
Exemple de code problématique:
<td height="30" colspan="3" align="left" valign="middle" class="featured">
<h2 style="text-align: left; padding: 0; margin: 0; color: #00799f; font-family: 'Roboto',arial, helvetica, sans-serif; font-size: 21px; font-weight: 100; background: none; border-bottom: 1px solid #b1d6e2; text-decoration: none; line-height: 36px; mso-line-height-rule: exactly;">cover story</h2>
</td>
Mise à JOUR:
J'ai essayé la suggestion dans les réponses à mettre la webfont importer le code à l'intérieur des balises conditionnelles qui excluent les Perspectives en vain.
<!--[if !mso]><!-- -->
@import url(http://www.example.css);
<!--<![endif]-->
ET
<!--[if !mso]><!-- -->
@import url(http://fonts.googleapis.com/css?family=Oxygen);
<!--<![endif]-->
MISE À JOUR II (SOLUTION):
Avec toute l'aide offerte, il est clair qu'un certain nombre d'apparence mineure problème pourrait causer ce problème. Le type de police méthode semble être préférable de @import. Avoir la webfont nom pour ne pas être la même que la police locale peut provoquer le même problème, mais ce n'est pas ce qui se passait avec ce courriel.
J'avais essayé de code conditionnel tôt pour masquer les webfont code d'importation à partir d'Outlook <!--[if !mso]><!-->
tout à fait.
Était le problème, je l'ai fait dans un style CSS de la balise dans la section d'en-tête. Le simple fait de placer ce code dans sa propre étiquette de style comme indiqué ci-dessous fait la différence.
Je confirme, ça fonctionne comme je l'ai été en mesure de retirer la solution de contournement supplémentaire code CSS que j'avais utilisé pour détecter la version d'Outlook 2007 et plus de restaurer h1, h2 valeurs à la police standard de la pile.
<!--[if !mso]><!-->
<style type="text/css">
@font-face {
font-family: 'oxygenlight';
src: url('http://www----/fonts/oxygen-light-webfont.eot');
src: url('http://www.----/fonts/oxygen-light-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.-----/fonts/oxygen-light-webfont.woff') format('woff'),
url('http://www.-----/fonts/oxygen-light-webfont.ttf') format('truetype'),
url('http://www.-----/fonts/oxygen-light-webfont.svg#oxygenlightlight') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
<!--<![endif]-->
campaignmonitor.com/resources/will-it-work/webfonts
OriginalL'auteur jsuissa | 2013-08-24
Vous devez vous connecter pour publier un commentaire.
Essayer de déclarer votre webfont si PAS de Outlook à la place. Le webfont pourrait être problématique pour Outlook, afin de ne pas l'appeler du tout. Vaut la peine d'essayer...
Edit:
Cette question a eu lieu avant avec des Perspectives de rupture lors de votre premier déclaré de la police de caractères entre guillemets. Cela semble être une perspective bug/limitation qui est inévitable malheureusement.
Oui, ce que je propose, c'est que vous utilisez le webfont lien à l'intérieur d'un
[if !mso]
de cette façon, Outlook n'a jamais le voir. Il serait plus simple que d'essayer d'enseigner les Perspectives de l'ignorer avec les solutions de contournementEssayé quelques variantes sur que sans un peu de chance. Mettra à jour les questions. Bonne suggestion.
Êtes-vous d'emballage de toutes les sections de texte dans votre e-mail avec leurs propres
<font>
tags? Vous devez déclarer à la police dans chaque cellule du tableau, ou dans une police de caractères de la balise.mise à jour de la réponse, mais malheureusement, je pense que ce n'est pas d'aller travailler...
OriginalL'auteur John
Pour obtenir des Perspectives pour l'utilisation de votre police de la pile au lieu de substituer votre web-police avec n'importe quelle police que Outlook choisit pour ajouter un commentaire conditionnel, qui ne seront lus que par Outlook pour affecter votre police de la pile de sauvegarde de polices de caractères. Définir votre web-police, mais ne définissent pas dans le commentaire conditionnel donc Outlook ignorer le web-police, aller tout droit pour c'est commentaire conditionnel et juste afficher Arial.
OriginalL'auteur davidcondrey
J'ai eu ce problème aussi, et je viens de trouver assez simple à corriger. Une fois que vous avez importé vos polices web, @media screen { } peut être utilisé pour les clients prenant en charge les requêtes des médias, et cela n'arrive qu'à ceux qui soutiennent des polices web. Ainsi, simplement en spécifiant le font-family déclaration à l'intérieur et à l'extérieur de ce sélecteur vous permet de masquer des polices spécifiques de clients de messagerie tels que Outlook, de sorte que votre prochaine police de secours sera affiché, et votre site web de la police apparaît bien dans les clients qui le prennent en charge.
D'ailleurs, Suivi de la campagne suggère que @import est mieux que @font-face dans les e-mails en général.
OriginalL'auteur huntie
Je me souviens avoir eu un problème similaire, avec un certain temps de retour. En fin de compte je pense que c'était le
@import
à l'origine du problème et j'ai dû utiliser une autre méthode pour tirer dans les polices.Au lieu d'utiliser le
@import
aller avec un@font-face
méthode.Ensuite utiliser la police de caractères comme vous le feriez normalement:
OriginalL'auteur Brett DeWoody
Le problème se produit probablement parce que votre utilisateur a installé localement, la version de la police et il y a un conflit.
Essayer de @font-face à l'importation (c'est la façon dont Google WebFonts œuvres de toute façon), et il suffit de le renommer font-family quelque chose de différent.
E. g.
:
Assurez-vous de tenir compte du changement dans le reste de votre marge!
OriginalL'auteur alias51
D'où vient cette CSS aller? Faut-il aller dans l'en-tête de plus?
OriginalL'auteur Matt Brown
Vous devez utiliser le "mso-font-alt" pour Police-Secours (Outlook 2010,2013,2016):
Une autre astuce pour remplacer personnalisé déclarations css:
Jetez aussi un coup d'oeil à: https://litmus.com/community/code/36-outlook-and-fallback-fonts
OriginalL'auteur Peter Kreinz