如何在Thymeleaf的style标签中注入带font-family的变量内容？

在Thymeleaf里开发邮件模板时，复用样式变量确实能提升效率，但遇到单引号被转义成'的问题很常见，以下是几种可行的解决方法：

方法1：用#strings.unescapeXml()还原转义字符 #

直接在输出变量时调用Thymeleaf的字符串工具方法，把转义后的单引号还原：

<div th:with="fontFamilySans='font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI Adjusted\', \'Segoe UI\', \'Liberation Sans\', Roboto, \'Helvetica Neue\', Arial, sans-serif;'">
  <p th:style="|margin: 0; padding: 0; ${#strings.unescapeXml(fontFamilySans)}|">Aloha from Hawaii</p>
</div>

生成的最终HTML会保留正常的单引号：

<p style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Adjusted', 'Segoe UI', 'Liberation Sans', Roboto, 'Helvetica Neue', Arial, sans-serif;">Aloha from Hawaii</p>

方法2：换用双引号包裹字体名调整变量定义 #

CSS允许用双引号标注字体名称，我们可以调整引号的使用逻辑，避免内部单引号的转义：

<div th:with='fontFamilySans="font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI Adjusted&quot;, &quot;Segoe UI&quot;, &quot;Liberation Sans&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif;"'>
  <p th:style="|margin: 0; padding: 0; ${fontFamilySans}|">Aloha from Hawaii</p>
</div>

这里用单引号包裹th:with的属性值，变量内容用双引号，内部字体名的双引号用"转义，生成的代码里双引号会正常显示，同样符合CSS规范。

方法3：用th:attr手动拼接style属性 #

th:attr可以更灵活地控制属性内容，配合unescapeXml也能解决转义问题：

<div th:with="fontFamilySans='font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI Adjusted\', \'Segoe UI\', \'Liberation Sans\', Roboto, \'Helvetica Neue\', Arial, sans-serif;'">
  <p th:attr="style='margin: 0; padding: 0; ' + ${#strings.unescapeXml(fontFamilySans)}">Aloha from Hawaii</p>
</div>

内容的提问来源于stack exchange，提问作者Slevin