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 property

这个网站如何很好地渲染字体？

2 个答案: