【问题标题】:Custom fonts not showing up in emails自定义字体未显示在电子邮件中
【发布时间】:2025-12-28 17:05:06
【问题描述】:

我在电子邮件中使用以下代码导入字体“Open sans”,但它只向系统中已有该字体的用户显示,否则它会显示 arial 字体。

@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
    body {
        font-family: 'Open Sans', sans-serif;
    }

    table,
    td,
    tr,
    th {
        font-family: 'Open Sans', sans-serif;
    }

    h2,
    p,
    div {
        font-family: 'Open Sans', sans-serif;
    }

我做错了什么?

【问题讨论】:

  • 您要发送给哪个电子邮件客户端?大多数电子邮件阅读器使用 1990 年代的 HTML 引擎。

标签: html fonts html-email


【解决方案1】:

自定义字体为not supported in all email clients。目前无法在 Outlook、Gmail 应用程序或任何网络邮件客户端中显示网络字体。请注意,无论电子邮件中的编码是什么,后备系统字体都会显示在某些电子邮件客户端中。

但是,您可以为支持的客户端指定网络字体,为不支持的客户端指定系统备用字体。在您的<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='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
<!--<![endif]-->

Style CampaignLitmus 上的电子邮件中有关 webfont 支持的更多信息。

【讨论】: