Question

我的品牌使用了特定的字体，我已经购买并自我托管。我想在我的电子邮件简报中使用该字体（使用后备字体）。使用@ font-face我已链接到我服务器上的自托管字体。我把html新闻稿文件放在我的服务器上，可以看到显示正确的字体。我还给自己发了一封测试邮件，然后再显示正确的字体。

但是，我正在Mac上编写HTML文件，当我在Firefox或Chrome中查看文件（在我的计算机上）时，显示的是后退字体而不是@ 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;
        }
 }

Answer 1

首先，如果在系统上安装了自定义字体，则很难对其进行测试。当浏览器或电子邮件客户端在字体堆栈中看到字体时，如果远程引用的版本失败，它可以显示本地安装的版本。因此即使它被打破了，它看起来也会有效。对于电子邮件，使用Litmus等远程服务或Acid on Email是测试电子邮件和网络字体显示的好方法。

根据您购买字体的位置，他们可能有办法在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">

电子邮件简报中的自托管字体未在本地显示

1 个答案: