css - 未在 HTML 电子邮件中指定字体大小的风险是什么?
问题描述
我一直在构建 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
等),从 HTML 电子邮件代码中省略、有效地将其委托给客户端/浏览器p
的风险是什么?font-size
最明显的危险似乎是,如果没有应用默认值,所有文本的大小都会相同,但这在现实世界中似乎不太可能?
编辑:
这个问题的动机是是否可以通过允许客户端/浏览器指定字体大小而不是将其硬编码到电子邮件中来提高可读性,例如@stephen-p 下面的评论。
解决方案
你可能会得到令人惊讶的结果。
我尝试了以下代码:
<!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 users 之外的所有内容。(有不同的 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>
推荐阅读
- pytorch - 如何在没有for循环的情况下在pytorch中计算图像的直方图
- bazel - Bazel:在多个 http_archive BUILD 文件之间共享宏
- node.js - Firebase Cloud Functions:尽管结果成功,但仍出现错误 500
- java - android Sqlite 并发事务安全吗?
- android - 没有 org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.3.71 的缓存版本
- java - adapter.notifyDataSetChanged 不刷新回收站视图
- php - 如果有多个模型,Laravel JS 验证器库将不起作用
- json - jsonPath Expression for json 和 json 参数的 json 使用 NIFI 表达式语言
- yocto - 如何在图像配方中全局继承一个类 - yocto
- reactjs - React + Formik + Yup 异步验证