如何在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電子郵件）

回答

相關問題