fonts - 该网站如何将字体渲染得如此出色？

Question

http://www.addthis.com/

顶部的大字体看起来很漂亮。即使在窗户上。我注意到他们没有为页面上的其他字体做这件事……是 Flash 内容还是什么？

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-shadow CSS3 属性