Question

我有一个HTML电子邮件代码，如下面的链接所示：

https://privatebin.net/?1ca92ace7be6c777#LLNgtdGPXCC4Si0Ui7jsEt7P/g+PsZ1gRq08qBTOljo=

问题是由链接链接的字体href =“https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700”rel =“stylesheet”type =“text / css即使我已将内联样式添加到所有标记，“也无法正确显示。此外，还会为续订按钮显示下划线。我尝试使用！important添加 text-decoration：none 样式。但是没用。有什么意见吗？

Answer 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='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->

有关Style Campaign和Litmus电子邮件中的网络字体支持的更多信息。

关于按钮中的下划线，有时电子邮件客户端会在按钮内的链接中放置默认（有时是蓝色）下划线。可以通过定位<span>按钮中的<a href="">来重置此项：

<强> CSS

<head>
    <style>
        .button-link {
            text-decoration: none !important;
        }
    </style>
</head>

<强> HTML

<table role="presentation" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td style="border-radius: 3px; background: #222222; text-align: center;">
            <a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 110%; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;">
                <span style="color:#ffffff;" class="button-link">Button Text</span>
            </a>
        </td>
    </tr>
</table>

Answer 2

实际上，我没有告诉你究竟是什么尝试我认为你希望将text-decoration: none;应用于锚点。试试这个

a:hover { text-decoration:none; }

如果你想要字体到身体然后应用这个

body{ font-family: 'Source Sans Pro', sans-serif;}

Answer 3

Web字体不适用于所有电子邮件客户端。他们不工作的一些客户包括Gmail，Yahoo，某些字体在Outlook和Android设备的电子邮件客户端中无效。

您需要选择在不支持Open Sans时使用的备份字体。我建议使用Trebuchet或Arial，或者满足客户对后备字体的期望。像这样：

font-family: "Open Sans, Trebuchet, sans-serif;";

这些链接可让您更好地了解网络字体以及如何在电子邮件中使用它们。

您的按钮问题

您的按钮仅在Windows Mail中显示下划线。但是，该按钮在Outlook中显示为Times New Roman，因为您在font-family描述中使用单引号''。它将此视为错误并默认为Times。你应该解决这个问题。

在发送电子邮件之前，您应该解决iPhone 5和Android的显示问题。

祝你好运。

HTML电子邮件和下划线上未显示的字体代表超链接

3 个答案: