手动执行小型大写字母以获得所需的外观而不是 font-variant: small-caps;

Question

约束：
1. 这是 HTML 时事通讯（非 HTML5 或 JS）
2. Font-family 为{Lucida Sans, Lucida Grande, Lucida San Unicode, serif}

我需要将现有的 PDF 时事通讯标头（最好对其进行改进，但不在简报中）与文本而非图像（因为许多电子邮件客户端不会自动加载图像而它是标头）匹配

我目前的代码（改编自活动监视器的免费主题 Classic by 45royale）是：

<h1 style="color: #fff; font: normal 33px Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif; margin: 0; padding: 0; line-height: 33px; letter-spacing: 16px; font-variant: small-caps;">Teeᴇᴇ</h1>
<p style="color: #dfa575; font: normal 11px Georgia, serif; margin: 0; padding: 0; line-height: 11px; letter-spacing: 2px">NEWSLETTER …</p>

请注意，前两个“e”是小写字母，词干明显比“T”细，并且比 PDF 中的小写字母小得多。

后两个“E”是我在 Unicode 的语音部分找到的小型大写 Unicode 字符。它们具有相同的茎，但在高于基线的高度方面仍然有点太低。

编辑：我刚刚在手提箱融合中检查了 OS X 上的 3 个 Lucida Faces，而我正在查看的任何Lucida 系列字体中都不存在完整字母表的 Small Caps。

包括“T”和“P”在内的所有字母似乎也比 PDF 版本厚，但这只是二阶问题。

有哪些手动选项可用。我在<h1> 标签内，这意味着如果我在 'ERRA' 的 'T' 之后创建一个新标签来设置不同的字体大小，我会免费获得一个 LineFeed：-/

如何在同一行设置多个字体大小，我应该只使用<p> 标签和自定义类来设置 CSS 和 inline 字体大小吗？

感谢阅读:-)

Answer 1

您可以使用<span></span> 之类的内联元素在同一行上设置多个字体大小。所以在你的例子中......

<style>
h1 { color: #fff; font: normal 33px Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif; margin: 0; padding: 0; line-height: 33px; letter-spacing: 16px; }
h1 span { font-variant: small-caps; }
.newsletter { color: #dfa575; font: normal 11px Georgia, serif; margin: 0; padding: 0; line-height: 11px; letter-spacing: 2px }
</style>

<h1>Tee<span>ee</span>EE</h1>
<p class="newsletter">NEWSLETTER …</p>

编辑：这是一个更新的片段，可能会有所帮助：

<style>
body { background:#658290 }
h1 { 
    color: #fff; 
    font: normal 33px Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif; 
    margin: 0; padding: 0; 
    line-height: 33px; letter-spacing: 16px; 
}
h1 span { font-variant: small-caps; letter-spacing:0.3em }
h1 span.upper { font-size:130%; }
</style>

<h1><span class="upper">ee</span><span class="lower">ee</span></h1>