4

约束：
1. 这是 HTML 时事通讯（没有 HTML5 或 JS）
2. 字体系列是{Lucida Sans, Lucida Grande, Lucida San Unicode, serif}

我需要将现有的 PDF 时事通讯桅杆头（相当改进，但不是简短的）与文本而不是图像匹配（因为许多电子邮件客户端不会自动加载图像并且它是标头）

标头 PDF

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

<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 …&lt;/p>

结果

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

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

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

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

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

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

谢谢阅读 ：-）

4

1 回答 1

2

您可以在同一行使用内联元素（如<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 …&lt;/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>
于 2012-09-05T13:58:48.177 回答