4

制約:
1. これは HTML ニュースレター用です (HTML5 または JS ではありません)
2. Font-family は{Lucida Sans, Lucida Grande, Lucida San Unicode, serif}

既存の PDF ニュースレターのマスト ヘッド (むしろ改善しますが、ブリーフにはありません) を画像ではなくテキストと一致させる必要があります (多くの電子メール クライアントは画像を自動的に読み込まず、それがマストヘッドであるため)。

マストヘッド 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 …&lt;/p>

結果

最初の 2 つの `e' はスモール キャップされており、'T' よりもステムが著しく細く、PDF のスモール キャップスよりもはるかに小さいことに注意してください。

2 番目の 2 つの「E」は、Unicode の音声セクションで見つけた小文字の Unicode 文字です。それらは同等のステムを持っていますが、ベースラインからの高さに関してはまだ少し低すぎます.

Lucida編集: スーツケース フュージョンの OS X で 3 つの Lucida Faces をチェックしたところ、見ているフォントのファミリのいずれにも完全なアルファベットのスモール キャップスは存在しません。

'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 に答える