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

我正在使用HTML邮件程序（HTML电子邮件），并且收到的设计包含自定义字体。我如何在我的HTML电子邮件中使用自定义字体？如何在HTML邮件程序中导入自定义字体（HTML电子邮件）

在此先感谢。

2017-04-17 Preetham Hegde

首先之间的托管，网页字体，目前支持这些电子邮件客户端：

AOL邮件
Android内建的邮件应用程式（非Gmail应用）
苹果邮件
iOS邮件
Outlook 2000中
Outlook.com

（如。所以没有办法在Gmail中显示网页，雅虎，或Windows的Outlook或更新版本）

第1步的自定义Web字体：如果字体已经像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工具转换成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; 
    } 
}

注：有关如何引用网页字体的邮件，请this article by Litmus深潜。

第2步：从那里，在字体堆栈引用的Web字体将在支持网页字体的电子邮件客户端显示出来。

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

电子邮件客户端做不支持Web字体（如Gmail网络，雅虎，或Windows的Outlook或更新版本）将跳过自定义字体，并试图显示的字体堆栈上市后备字体。

来源

2017-04-17 17:47:58

感谢您的答案和编辑我的问题。 –

在HTML电子邮件中使用自定义字体是一种不好的做法。但是你可以使用它们像这样：包括自定义字体的地方<head></head>标签

<style> 
@font-face { 
    font-family: FontName; 
    src: url(http://www.fonts.com/fontname.otf); 
} 
</style>

，并将其应用于元素内嵌

<h1 style="font-family: FontName">My heading</h1>

来源

2017-04-17 13:25:27 Vadzim

谢谢。但它不起作用。 –

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

回答

相关问题