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

Question

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

提前致谢。

Answer 1

首先，这些电子邮件客户端目前支持网络字体：

美国在线邮件
本机 Android 邮件应用程序（不是 Gmail 应用程序）
Apple 邮件
iOS 邮件
展望 2000
Outlook.com

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

第 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]-->

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

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

Outlook 不支持 Web 字体并且会在这个参考上窒息，所以将它包装在 @media 标记中将使 Outlook 一起忽略它。

如果该字体在线上不可用，但您有字体文件，可以使用 font squirrel 等工具将其转换为网络字体。生成的文件可以上传到服务器并像这样引用：

@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;
    }
}

注意：要深入了解如何在电子邮件中引用网络字体，请查看this article by Litmus。

第 2 步：从那里开始，在字体堆栈中引用网络字体将在支持网络字体的电子邮件客户端中显示它。

font-family: 'Roboto', 'fallback font 1', 'fallback font 2', sans-serif;

不支持网络字体的电子邮件客户端（例如 Gmail 网络、Yahoo 或更新版本的 Windows Outlook）将跳过自定义字体并尝试显示字体堆栈中列出的后备字体.

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

How to import custom fonts in HTML mailers (HTML Email)

html

html-email

webfonts

font-face