html – 手动执行小型大写以获得所需的外观而不是字体变体：小型大写;

约束：
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,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和内联字体大小？

谢谢阅读 ：-)

解决方法

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

<style>
h1 { color: #fff; font: normal 33px Lucida Sans,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>

编辑：这是一个可能有帮助的更新的snippit：

<style>
body { background:#658290 }
h1 { 
    color: #fff; 
    font: normal 33px Lucida Sans,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>