php - 我的 PHP HTML 电子邮件表单的某些 CSS 无法进入邮件表单
问题描述
我正在使用 PHPMailer 发送电子邮件,但发送时表单 CSS 的某些方面不会进入邮件:
- 对齐内容:居中;
- 对齐项目:中心
- 和字体系列。
- 轮廓偏移:5px;
有谁可以告诉我为什么这些 CSS 没有进入发送的电子邮件表单,而所有其他的加载都没有问题?
如果我在控制台中输入这些值,它们就会起作用,所以我不明白为什么在发送邮件时这些 CSS 值会从 DOM 中删除。
这是我的代码:
<style>@import url("https://fonts.googleapis.com/css2?family=Thasadith:ital,wght@0,400;0,700;1,400;1,700&display=swap");</style>
<div style="background-color: #ffffff; margin: auto; width: 65%; border: 1px solid #e1e1e1; outline: 1px solid #e1e1e1; outline-offset: 5px; margin-top: 25px; margin-bottom: 25px;padding: 5px;">
<div style="display: flex; justify-content: center; align-items: center; background-color: #f35653; margin-bottom: 20px; padding: 30px 0px;">
<div style="background-image: url(https://i.imgur.com/XPTHrId.png); background-position: center; background-size: cover; width: 50px; height: 50px;"></div>
<div style="font-size: 40px; text-transform: uppercase; align-self: center; color: white; font-family: Thasadith, sans-serif; font-weight: 700; margin-left: 5px;">Enkou Academy</div></div>
<div style="padding: 10px 40px 40px;font-size: 15px;">
<p>We received a request to reset the password for your Enkou Academy account.<br><br>
To reset the password, click on the link below:<br><br>
<a href="' . $url . '" style="text-decoration: none; color: #f35652;">Click here!</a><br><br>
If you didn't request a password reset, let us know.</p>
</div>
</div>'
解决方案
电子邮件程序仅支持有限的 CSS 子集。查看https://www.caniemail.com/了解这些。
Apple Mail 和 Gmail 支持 Flex,但 Outlook、Yahoo、AOL https://www.caniemail.com/search/?s=flex不支持 Flex 。这就是我们仍然使用表格编写电子邮件的原因!
font-family
会起作用,但如果您转到该网址(https://fonts.googleapis.com/css2?family=Thasadith:ital,wght@0,400;0,700;1,400;1,700&display=swap)并复制,您会找到更好的支持@font-face
进入<style>
。_ 即使这样,您的自定义字体也只会在 Apple、Samsung 和其他一些公司上显示:https ://www.caniemail.com/search/?s=font-face
例如这样写:
<style type="text/css">
@font-face {
font-family: 'Thasadith';
font-style: italic;
font-weight: 400;
font-display: swap;
src: local('Thasadith Italic'), local('Thasadith-Italic'), url(https://fonts.gstatic.com/s/thasadith/v3/mtG-4_1TIqPYrd_f5R1osnMX-CE.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
mso-font-alt: Arial;
}
</style>
请注意添加了 Outlook 字体后备 ( mso-font-alt
)。
推荐阅读
- xaml - 您能否在 UWP XAML 中定义一个厚度静态资源,该资源引用另一个静态资源(双精度)作为其值之一?
- r-markdown - 如何在 RMarkdown 中包含 Bibtex 参考?
- python - 使用 Python 将 CSV infile 更改写入 CSV outfile
- laravel - 初始化 DB:Laravel 存储库模式中的事务
- python - Python CVXPY kronecker 产品尺寸
- pdf - 如何在浏览器中打开 pdf 而不是在 webapi 中下载
- php - 尝试将函数添加到已经存在的 PHP 库
- windows - 如何使用通配符对目录中的文件进行计数?
- api - 使用 AA.com 网站上的发布 API 添加的随机生成的密钥
- java - 带有列表视图的视图持有者单选按钮