html - 手动做小型大写字母以获得所需的外观而不是字体变体 : small-caps;

约束:
1. 这是一个 HTML 时事通讯(没有 HTML5 或 JS)
2. 字体家族是 {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 字体系列中都不存在完整字母表的小型大写字母。

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

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

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

谢谢阅读 :-)

最佳答案

您可以使用 <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>