未在 HTML 电子邮件中指定字体大小的风险是什么？答案

【问题标题】：What are the risks of not specifying font size in an HTML email?未在 HTML 电子邮件中指定字体大小的风险是什么？
【发布时间】：2021-05-18 08:54:14
【问题描述】：

我一直在构建 HTML 电子邮件，并且总是在我的代码中指定字体大小，例如

<h1 style="font-size: 24px">Hello Readers!</h1>
<p  style="font-size: 16px">Welcome to 2021!</p>

但是，浏览器和电子邮件客户端（Gmail、Outlook.com、iOS 上的 Mail 等）似乎都可以很好地应用基于 HTML 标记的适当样式。例如。以下的h1 和p 标记中的内容的大小与您预期的一样，即使代码中没有font-size 信息：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Font Size Test</title>
</head>
<body>
    <h1>Hello Readers!</h1>
    <p>It's been a long year...</p>
</body>
</html>

假设正在使用与内容相关的 HTML 标记（h1、h2、p 等），从 HTML 电子邮件代码中省略 font-size 有什么风险，有效地将其委托给客户端/浏览器？

最明显的危险似乎是，如果没有应用默认值，所有文本的大小都会相同，但在现实世界中这似乎不太可能？

编辑：

这个问题的动机是是否可以通过允许客户端/浏览器指定字体大小而不是将其硬编码到电子邮件中来提高可读性，例如comment below from @stephen-p。

【问题讨论】：

是的，理想情况下，除了标题标签之外，电子邮件中的所有文本都具有相同的字体大小，它们可能看起来更大，但它也有可能从其父容器中获取字体大小。尝试检查收件箱中的电子邮件，您会发现它们始终包含在某个容器中，这些容器可能因客户而异。在我的情况下，所有字体大小都变得相同，并且同一电子邮件的移动视图和桌面视图中的字体不同。
unlikely in the real world? 是正确的。谈到 HTML 电子邮件，现实世界并不有趣。内联样式是最好的方法。如果未指定，Outlook.com 甚至会更改标题的颜色。
相反，在 HTML 电子邮件中指定字体大小有哪些风险？ — 我绝对讨厌收到每个段落都应用<p style="font-size: 10px"> 的电子邮件。为什么？因为 10px 太小了，我无法阅读，并且 每次都指定大小，我无法全局调整它。是的，有浏览器缩放功能，但这也将电子邮件客户端控件放大到太大。 </gripe> ...和 在 <head> 中使用 <style> 块，因此大小不会重复得到很好的支持 — campaignmonitor.com/css/style-element/style-in-head
很好的评论感谢@StephenP - 这是我提出这个问题的动机。已相应更新。

标签： css html-email font-size

【解决方案1】：

您可能会得到令人惊讶的结果。

我尝试了以下代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Font Size Test</title>
</head>
<body>
    <h1>Hello Readers!</h1>
    <p>It's been a long year...</p>
    <h2>In other news</h2>
    <p><span>This is done with a p and span</span></p>
    <h3>Now we're h3</h3>
    <strong>and let's try strong text</strong>
    <h4>But wait, there's more</h4>
    <table>
        <tr>
            <td>This is <u>in a</u> table with a <a href="https://www.google.com">link</a> too</td>
        </tr>
    </table>
    <hr>
    This is without any tag
</body>
</html>

并且从三星的标题标签中没有得到字体大小：

当然，不指定 font-family 也会产生一些非常奇怪的结果——Times New Roman 是 Outlook 桌面（和 freenet.de）的默认设置：

不同的字体系列有不同的字体大小。不指定 line-height 也会改变段落的高度，这会影响你的设计。

但在其他方面非常典型的回应——来自 Apple Mail：

我认为来自 Mail.ru 的这个（下）有很大的余量，因为我们也没有指定。

链接有时在测试中加下划线，有时没有。

总而言之，如果您没有指定字体大小（尽管三星至少需要它），您会发现自己无论如何都需要指定其他所有内容，那么为什么不指定字体大小呢？

更新

我只插入一个标准包装器就让三星工作。因此，省略 font-size 对所有内容都适用。

但是，如果您想在<style> 标记中一次指定字体大小，那么这将适用于所有Gmail IMAP/POP 用户。（有不同的Gmail版本：查看https://www.hteumeuleu.com/2019/trying-to-make-sense-of-gmail-css-support-2019-edition/）

这是我在三星使用的代码，并指定了一次字体大小。另请注意，您必须小心捕获您使用的所有标签 - 不在标签内的文本显然不会被拾取（例如，如果您还没有为 td 指定字体大小，则仅在 td 中）。

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Font Size Test</title>
    <style>p {font-size: 24px}</style>
</head>
<body>
    <center style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
        <div style="max-width:600px;">
            <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
            <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
            <![endif]-->
            <table align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;margin:0 auto;width:100%;max-width:600px;">
                <tbody><tr>
                    <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;">
    <h1>Hello Readers!</h1>
    <p>It's been a long year...</p>
    <h2>In other news</h2>
    <p><span>This is done with a p and span</span></p>
    <h3>Now we're h3</h3>
    <strong>and let's try strong text</strong>
    <h4>But wait, there's more</h4>
    <table>
        <tr>
            <td>This is <u>in a</u> table with a <a href="https://www.google.com">link</a> too</td>
        </tr>
    </table>
    <hr>
    This is without any tag
                    </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </center>
</body>
</html>

【讨论】：

很好的答案感谢@Nathan。我已经添加了提出这个问题的动机，即是否可以通过允许客户端/浏览器控制字体大小来改善用户体验。 RE 其他属性，我认为字体系列（例如）可以只在一个地方指定，字体大小需要添加到每个标签，因此更容易导致不一致。跨度>
我认为您给出的示例（除了三星邮件）都清晰易读，每个标签之间的风格区别合理，这表明在大多数情况下，省略字体大小标签不会影响 (甚至可以改善）用户体验/可读性。
但要点是，基于三星的示例，您确实需要在代码中指定字体大小以确保不同标签之间的区别。
@MattSaunders 实际上，指定标准包装可以为三星修复它。不过，Gmail IMAP 根本不支持<style>，所以如果您确实想更改默认值，就只有那个。