电子邮件时事通讯中未在本地显示的自托管字体
我的品牌使用一种特殊的字体，这是我自己购买并托管的。我想在我的电子邮件时事通讯中使用字体(使用回退字体)。使用@font-face，我已经链接到我的服务器上的自托管字体。我已经将html时事通讯文件放到了我的服务器上，可以看到显示了正确的字体。我还给自己发了一封测试电子邮件，再次显示了正确的字体。
然而，我是在我的Mac上写HTML文件，当我在Firefox或Chrome中查看文件(在我的电脑上)时，显示的是fall字体，而不是@ font -face链接字体。为什么会这样，我能做些什么呢？到字体的链接是绝对的，所以我假设它在本地测试时应该可以工作。如果我不能在我的计算机上进行本地测试，这将会使开发变得困难。更新:奇怪的是，当我在Safari中打开我电脑上的html文件时，显示的是链接到字体的内容。
更新:这与.htaccess文件有关吗？请参阅http://ijotted.blogspot.co.uk/2012/05/self-hosting-web-fonts-for-use-on-your.html "IE和Firefox要求字体必须来自与网站相同的域“浏览器无法访问文件，因为文件存储在我的服务器上(而不是我的计算机上)？
代码如下：
@media screen {
@font-face {
font-family: 'ElenaWebBasic';
src: url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.eot');
src: url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.eot?#iefix') format('embedded-opentype'),
url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.woff2') format('woff2'),
url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
}Stack Overflow用户
发布于 2016-12-02 21:27:54
首先，如果您在系统中安装了自定义字体，则很难对其进行测试。当浏览器或电子邮件客户端在字体堆栈中看到字体时，如果远程引用的版本失败，它可以显示本地安装的版本。因此，即使它坏了，它看起来也像是工作的。对于电子邮件，使用Litmus或email on Acid之类的远程服务是测试电子邮件和web字体显示的好方法。
根据你在哪里购买的字体，他们可能会有一种方法在CDN上引用它。引用一个服务(如Google字体)是目前在html电子邮件中显示网页字体的最简单的方式。
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
<link href='https://place-you-bought-the-font.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->我建议看看字体销售商的网站，看看他们是否有这样的选择。
下面是可以尝试的a few more options：
<style type="text/css">
@media screen {
@font-face{
font-family:'Open Sans';
font-style:normal;
font-weight:400;
src:local('Open Sans'), local('OpenSans'), url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}
}
</style>电子邮件与@import有问题，因此您可以尝试使用<link>：
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">https://stackoverflow.com/questions/40932481
复制相似问题
腾讯云开发者
