Question

约束：
这是一个HTML简报（没有HTML5或JS） 2.字体系列为{Lucida Sans, Lucida Grande, Lucida San Unicode, serif}

我需要匹配现有的PDF简报桅杆头（而不是改进它，但它不在简报中），文字不是图像（因为许多电子邮件客户端不会自动加载图像而且它是标头）

Masthead 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>

result

请注意前两个'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>

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

eeee!

<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>

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

1 个答案: