我正在使用 HTML 邮件(HTML 电子邮件)，我收到的设计包含自定义字体。如何在我的 HTML 电子邮件中使用自定义字体？
提前致谢。
最佳答案
首先，这些电子邮件客户端目前支持网络字体:
- 美国在线邮件
- 原生 Android 邮件应用(非 Gmail 应用)
- 苹果邮件
- 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 不支持网络字体并且会在这个引用上窒息，所以将它包装在 @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 邮件程序(HTML 电子邮件)中导入自定义字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43452202/