logo标签列表

如何在HTML邮件中导入自定义字体（HTML电子邮件）

htmlhtml-emailfont-facewebfonts
13

我正在制作HTML邮件（HTML Email），我收到的设计中包含自定义字体。如何在我的HTML邮件中使用自定义字体？

谢谢提前。

1个回答
23

首先，以下电子邮件客户端目前支持Web字体：

  • AOL Mail
  • 原生Android邮件应用程序（非Gmail应用程序）
  • Apple Mail
  • iOS Mail
  • Outlook 2000
  • Outlook.com

（例如，在Gmail Web、Yahoo或新版本的Windows Outlook中无法显示自定义Web字体）

步骤1：如果字体已经托管在像Google Fonts这样的服务中，可以在HTML的<head>部分引用它，如下所示：

<!-- 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://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->

enter image description here

或者你可以使用@import方法。

<style>
    @media screen {
        @import url('https://fonts.googleapis.com/css?family=Roboto');
    }
</style>

enter image description here

Outlook不支持Web字体，对于这个引用会出现问题，因此将其包装在@media标签中将使Outlook完全忽略它。

如果字体在网上不可用，但您有字体文件，则可以使用Font Squirrel等工具将其转换为Web字体。生成的文件可以上传到服务器并像这样引用：
@media screen {
    @font-face {
        font-family: {font-name};
        src: url({http://www.website.com/font-url}) format('woff'),
             url({http://www.website.com/font-url}) format('truetype');
        font-weight: normal;
        font-style: normal;
    }
}

注意：如果您想深入了解如何在电子邮件中引用Web字体，请查看Litmus的这篇文章。

步骤2：接下来，在字体堆栈中引用网络字体，这将在支持网络字体的电子邮件客户端中显示它。
font-family: 'Roboto', 'fallback font 1', 'fallback font 2', sans-serif;

电子邮件客户端不支持网络字体（如Gmail网页版，Yahoo或较新版本的Windows Outlook），将跳过自定义字体并尝试显示字体堆栈中列出的后备字体。
这在我的某些 Outlook 中仍然显示为 Times New Roman。 - Eoin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接