Question

我正在将docx转换为html格式（使用apache poi）并将其作为电子邮件发送。

生成的html片段看起来像这样

＆＃13;

<html>
<head>
	....
	<style>

		span.Normal{
			font-family: 'Arial';font-size: 9.0pt;
		}

		span.Title{
			font-family: 'Cambria';font-size: 28.0pt;color: #000000;
		}

		span.MySubtitle{
			font-family: 'Arial';font-size: 18.0pt;color: #000000;
		}

		span.MyTitle{
			font-family: 'Arial';font-size: 22.0pt;font-weight: bold;color: #000000;
		}

	...
	</style>
</head>
<body> 
....

	<p class="Normal Title MyTitle">
		<span id="_GoBack">
			<span class="Normal Title MyTitle">Welcome Message</span>
			<span class="Normal Title MyTitle"> </span>
			<span class="Normal Title MyTitle">Username</span>
		</p>
		<p class="Normal Title MySubtitle">
			<span class="Normal Title MySubtitle">Issues and Solutions</span>
		</p>

	...
</body>
</html>

＆＃13;

Outlook客户端无法识别多个css类。它只渲染第一个css类＆＃34;正常＆＃34;并忽略其余的。但我的原始格式（在docx中）存在于＆＃34; MyTitle＆＃34; ＆安培; ＆＃34; MySubTitle＆＃34;类。

Outlook支持多个css吗？有没有办法可以控制多个css生成。

Answer 1

如前所述，您应首先检查您的HTML以使其更清洁。电子邮件很难在每个邮件客户端/服务器上正确完善。因此，如果您想要把事情弄清楚，请查看网络上任何地方可用的所有免费和响应式模板。

经典而有效的邮件解决方案依赖于表格标记。

您可以找到good example here

此外，当涉及到在不同的邮件客户端上显示时，Outlook是最难的之一。像Litmus这样的工具允许您预览电子邮件的结果，但它非常昂贵。幸运的是，他们还提出了free responsive templates，你可以用它来获取灵感。

不要犹豫发布电子邮件的改进版本，以便我们查看并更有效地为您提供帮助。

Answer 2

好的，这里出现了很多问题。首先，html根本不正确。您有段落嵌套的段落，并且您使用跨度来定义标题，并将每个单词拆分为自己的跨度。

我不知道开头和结尾的三个点是什么，但它们不应该在样式标签中。

你的类名不是真正的描述，它们是重复规则，你将每个类应用于每个元素，并且它们在样式表中出现故障，使得理解正在发生的事情变得令人困惑。

我的建议是：

使用语义标记
丢弃类并使用语义选择器
使用DRY原则（不要重复）
列出具有逻辑顺序的规则，例如从最大值开始到最小值结束。

这是使用样式规则的一些重构代码，并演示了如何使用每个元素。

<html>
	<head>
		<style>
			body {
				color: #000000;
			}
			h1,
			h2,
			p { 
				font-family: 'Arial';
			}
			h3 {
				font-family: 'Cambria';
			}
			h1 {
				font-size: 28pt;
			}
			h2 {
				font-size: 22pt;
			}
			h3 {
				font-size: 18pt;
			}
			p {
				font-size: 9pt;
			}
		</style>
	</head>
	<body> 
		<h1>Heading 1</h1>
		<h2>
			Heading 2
		</h2>
		<h3>
			Heading 3
		</h3>
		<p>
			This is paragraph text.
		</p>
	</body>
</html>

多个css类无效

2 个答案: