Html Gmail 未显示正确的字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28747848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Gmail not showing correct font
提问by Hadi
I am trying to change the font of my emails to open sans, however, I am having issues with Gmail rendering the correct font. I managed to find a way to solve the issue for outlook. This is what I have:
我正在尝试更改电子邮件的字体以打开 sans，但是，我在 Gmail 呈现正确字体时遇到了问题。我设法找到了解决 Outlook 问题的方法。这就是我所拥有的：
body {
身体 {
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
}
I have also tried other things such as declaring all text to be open sans:
我还尝试了其他事情，例如将所有文本声明为 open sans：
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300'rel='stylesheet'type='text/css'>
<style type="text/css">
.stylealltext { font-family: 'Open Sans', sans-serif;}
.stylealltextbold {font-weight: bold; font-family: 'Open Sans', sans-serif; }
However, Gmail decides to show Arial, while Google Inbox decides to show Helvetica.. It looks like Google's mailing services just overrides whatever I feed it. Can anyone help?
但是，Gmail 决定显示 Arial，而 Google Inbox 决定显示 Helvetica。看起来 Google 的邮件服务只是覆盖了我提供的任何内容。任何人都可以帮忙吗？
Solution
解决方案
Salvimatus's solution worked:
Salvimatus 的解决方案有效：
<span style="font-family: your-chosen-font">your text</span>
The span needs to manually added.
跨度需要手动添加。
回答by salvimateus
Gmail does not support @font-face.
Gmail 不支持@font-face。
For you customize the font, you should write inline in each block of text that you have:
为了自定义字体，您应该在您拥有的每个文本块中内嵌：
< span style="font-family: your-chosen-font">your text< /span>
< span style="font-family: your-chosen-font">your text< /span>
Note: must be a font we have natively on Windows or Mac.
注意：必须是我们在 Windows 或 Mac 上原生的字体。
回答by mydigitalodyssey
Styling in-line is definitely best practice however it would seem the major email clients do support adding a font declaration to CSS included in the head of the html file.
内嵌样式绝对是最佳实践，但似乎主要的电子邮件客户端确实支持向包含在 html 文件头部的 CSS 添加字体声明。
As Aaronmentions custom fonts do not work in emails and most likely never will for the foreseeable future. Avoid this by discussing beforehand with clients or designers. Only websafe fontswill display in email clients and even then you will get mixed results in leading and kerning cross platform.
正如Aaron提到的，自定义字体在电子邮件中不起作用，并且在可预见的未来很可能永远不会。通过事先与客户或设计师讨论来避免这种情况。只有websafe 字体会显示在电子邮件客户端中，即使这样，您也会在跨平台前导和字距调整中获得混合结果。
Salvimateusis correct that the following will be a bulletproof solution.
Salvimateus是正确的，以下将是一个防弹解决方案。
< span style="font-family: your-chosen-font">your text< /span>
However this will also work:
但是，这也将起作用：
<table>
<tr>
<td style="font-family: your-chosen-font;">Your text here <br> more text.</td>
</tr>
</table>
As will this:
就像这样：
// CSS added to the <head> of the email
<style>
.myClass{ font-family: your-chosen-font; }
</style>
// Class added to the <td> element in the <body> of the email
<table>
<tr>
<td class='myClass'>text here <br> more text.</td>
</tr>
</table>
I can confirm the last option seems to work in the major email clients (Gmail, Outlook, iOS) both desktop and mobile and I've seen good results on Windows phones also.
我可以确认最后一个选项似乎适用于桌面和移动的主要电子邮件客户端（Gmail、Outlook、iOS），而且我在 Windows 手机上也看到了不错的结果。
This is mainly due to the email being recompiled by the 3rd party email marketing software you are naturally using and the css is shoved inline by the compiler.
这主要是由于电子邮件被您自然使用的 3rd 方电子邮件营销软件重新编译，并且 css 被编译器推入内联。
The net result here is less initial work for the developer.
此处的最终结果是减少了开发人员的初始工作。
As a side note if you happened to add all three (just to be sure) - then Salvimateussolution will trump all others as it is applied to the <span>. In this instance it is read last and therefore rendered by the email client.
作为旁注，如果您碰巧添加了所有三个（只是为了确定） - 那么Salvimateus解决方案将胜过所有其他解决方案，因为它应用于<span>. 在这种情况下，它最后被读取，因此由电子邮件客户端呈现。
回答by DNReNTi
According to Campaign Monitors post: Guide to CSS support in emailGmail does not support the @font-facerule. Actually it is barely support anything. :/
根据 Campaign Monitors 帖子：电子邮件中的 CSS 支持指南Gmail 不支持该@font-face规则。实际上它几乎不支持任何东西。：/
回答by MD Tarik Hasan Khan
In inline css if you add custom font at the beginning of the font-family declaration, outlook desktop apps in windows will start rendering the font in 'Times New Roman'. To bypass the issue, set custom font family in media query.
在 inline css 中，如果您在 font-family 声明的开头添加自定义字体，Windows 中的 Outlook 桌面应用程序将开始在“Times New Roman”中呈现字体。要绕过此问题，请在媒体查询中设置自定义字体系列。
So, your inline font-family declaration can be
因此，您的内联字体系列声明可以是
font-family: Arial, sans-serif;
And add this to the head section of your HTML file First get the font from Google fonts
并将其添加到您的 HTML 文件的 head 部分首先从 Google 字体中获取字体
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
Then add the media queries
然后添加媒体查询
@media screen and (max-width: 600px) {
table, td, span, p, div {
font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;}
}
@media screen and (min-width: 600px) {
table, td, span, p, div {
font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;}
}
This ensures no problem with outlook and your custom font will render in all those that support it.
这确保 Outlook 没有问题，并且您的自定义字体将在所有支持它的字体中呈现。
