HTML 电子邮件中未显示字体，超链接带有下划线
Posted
技术标签:
【中文标题】HTML 电子邮件中未显示字体，超链接带有下划线【英文标题】：Fonts not displayed on HTML email and underline comes for hyperlinks 【发布时间】：2018-05-18 13:58:13 【问题描述】：我有一个 html 电子邮件代码，如下链接所示：
https://privatebin.net/?1ca92ace7be6c777#LLNgtdGPXCC4Si0Ui7jsEt7P/g+PsZ1gRq08qBTOljo=
问题是 link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet" type="text/css" 链接的字体" 即使我已将内联样式添加到所有标签，也无法正确显示。 更新按钮也会显示下划线。我尝试使用 !important 添加 text-decoration:none 样式。但没有用。 有意见吗？
【问题讨论】：
大多数情况下，如果电子邮件客户端不支持网络字体尚未。 【参考方案1】：你在这里问了几个问题，所以我会尽力分别回答。
Web 字体，正如其他人所提到的，是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 的电子邮件中详细了解网络字体支持。
关于按钮中的下划线，有时电子邮件客户端会在按钮内的链接中放置默认（有时是蓝色）下划线。这可以通过在<a href=""> 按钮内定位<span> 来重置：
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>
【讨论】：
很好的回答，来自 myside 的 +1 问题是我将它用作变量并通过脚本发送消息。 privatebin.net/… 问题是我在未加载自定义字体的脚本中使用双引号中的字体名称。但是在设计时，我使用了启用自定义字体的单引号。 是的，<span style="font-family: "Source Sans Pro"..."> 会有问题。最好与 <span style="font-family: 'Source Sans Pro'..."> 、 <span style='font-family: "Source Sans Pro"...'> 甚至 <span style="font-family: Source Sans Pro..."> 一起使用。
当我更改为 它显示 HTTP 错误。由于消息本身是单引号
然后我会尝试不带引号：<span style="font-family: Source Sans Pro...">。它可能不起作用，但您不能重复使用用于打开 style="" 属性的相同双引号，如果您可以使用单引号，则不确定您还有什么其他选项。【参考方案2】：
Web 字体并不适用于所有电子邮件客户端。一些无法使用的客户端包括 Gmail、Yahoo、某些字体在 Outlook 和 android 设备的电子邮件客户端中无法使用。
您需要选择一种在不支持 Open Sans 时使用的备用字体。我建议使用 Trebuchet 或 Arial 或满足客户对备用字体的期望。像这样的：
font-family: "Open Sans, Trebuchet, sans-serif;";
这些链接将使您更好地了解网络字体以及如何在电子邮件中使用它们。
https://www.campaignmonitor.com/css/text-fonts/font-face/ https://www.cssfontstack.com https://www.cssfontstack.com/Open-Sans https://litmus.com/blog/the-ultimate-guide-to-web-fonts您的按钮问题
您的按钮仅在 Windows Mail 中显示下划线。但是，该按钮在 Outlook 中显示为 Times New Roman，因为您在字体系列描述中使用了单引号 ''。它认为这是一个错误并默认为 Times。你应该解决这个问题。
您在使用 iPhone 5 和 Android 时遇到了显示问题，您应该在发送电子邮件之前解决。
祝你好运。
【讨论】：
【参考方案3】：实际上，我没有告诉你你到底在尝试什么，我认为你希望将 text-decoration: none; 应用于锚点。试试这样
a:hover text-decoration:none;
如果你想要字体到正文然后应用这个
body font-family: 'Source Sans Pro', sans-serif;
【讨论】：
它没有悬停。链接已显示并带有下划线。 是的，因为默认a anchor 悬停属性。
我试试看，为什么字体不显示？
你添加了这个font-family: 'Source Sans Pro', sans-serif;以上是关于HTML 电子邮件中未显示字体，超链接带有下划线的主要内容，如果未能解决你的问题，请参考以下文章