fonts - このサイトはどのようにしてフォントをうまくレンダリングするのですか?

Question

http://www.addthis.com/

上部の大きなフォントがとても見栄えがします。窓の上でも。私は彼らがページ上の他のフォントのためにそれをしなかったことに気付きました.それはフラッシュコンテンツか何かですか?

Answer 1

Firebug または Chrome 検査ツールを使用すると、h2 タグ (ページ ヘッダー) のスタイル定義が次のようになっていることがわかります。

h2 {
font-family: "HelveticaNeueBold","HelveticaNeue-Bold","Helvetica Neue",Helvetica,"open sans",arial,sans-serif;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 1.2em;
word-wrap: break-word;
color: black;
letter-spacing: -0.04em;
}
.hp-banner-b h2 {
margin: 0 0 5px 0;
font-size: 4.2em;
letter-spacing: -0.02em;
text-shadow: 0 2px black;
}

そして、そのすぐ下のサブヘッダーの場合:

.helv, .bigtext {
font-family: "Open Sans",Helvetica,arial,sans-serif;
font-style: normal;
font-weight: 300;
letter-spacing: -.05em;
}

Answer 2

あなたが「1400万のサイトが間違っているはずがない」について話しているなら。レンダリング、それを行う簡単な方法は、タイトルを複製することです：

HTML：

 <div class="title"><h1>%%My title%%<span>%%My title%%</span></h1></div>

次に、偽のスパンタイトルを実際のh1タイトルの下に配置する必要があります。

CSS：

.title h1 {
    position: relative;
    margin-top: 0px;
    color: white;
}

.title h1 span {
    position: absolute;
    top: -1px;
    left: -1px;
    color: black;
}

この方法でレンダリングできると思います。

編集：多分より良い方法-あなたはtext-shadowCSS3プロパティを使うことができます