如何在HTML邮件程序中导入自定义字体(HTML电子邮件)
Pre*_*gde 2 html html-email webfonts font-face
我正在使用HTML邮件程序(HTML电子邮件),我收到的设计包含自定义字体.如何在HTML电子邮件中使用自定义字体？
提前致谢.
首先,这些电子邮件客户端目前支持Web字体:
- AOL邮件
- 原生Android邮件应用(不是Gmail应用)
- Apple Mail
- iOS邮件
- Outlook 2000
- Outlook.com
(例如,因此无法在Gmail网页,Yahoo或更新版本的Windows Outlook中显示自定义网络字体)
第1步:如果字体已经托管在Google字体之类的服务上,则可以从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等工具将其转换为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:从那里,引用字体堆栈中的Web字体将在支持Web字体的电子邮件客户端中显示它.
font-family: 'Roboto', 'fallback font 1', 'fallback font 2', sans-serif;
不支持Web字体的电子邮件客户端(例如Gmail Web,Yahoo或更新版本的Windows Outlook)将跳过自定义字体并尝试显示字体堆栈中列出的后备字体.
| 归档时间： |
|
| 查看次数： |
8518 次 |
| 最近记录： |