html - 重新创建 iCloud Beta 使用的 "thin"字体

Question

我希望在 http://beta.icloud.com 上重新创建“登录 iCloud”文本

我已经复制了属于那行文本的所有样式，除了文本的粗细之外，一切都井井有条。我看到 Apple 已将 font-weight 300 应用于样式，这应该并且确实使它更薄，但是当我复制并粘贴完全相同的代码时，我的浏览器在我自己的网页上呈现更厚。我的问题是，Apple 是如何将文本变细的，或者我怎样才能达到同样的效果？

到目前为止我使用的代码是:

position: absolute;
color: #FFF;
left: 0px;
right: 0px;
height: 40px;
top: 131px;
font-size: 35px;
font-family: "Helvetica Neue",sans-serif;
font-weight: 300;
line-height: 1.2;
-webkit-font-smoothing: antialiased;

关于什么可能导致它以正常厚度呈现的任何想法？我没有冲突的样式，这是唯一与我的文本行相关的代码

Answer 1

使用给定的 CSS，我可以获得与 iCloud 网站上相同的样式。 ( http://jsfiddle.net/LeBen/WznR5/ )

在 font-weight 之后，可以稍微改变文本在 webkit 浏览器上的外观的属性是 -webkit-font-smoothing: antialiased;。如果您不使用它，浏览器会回退到默认的平滑模式(subpixel-antialiased)并导致文本看起来更粗。

你确定你已经将它包含在你的测试中并且你的浏览器应用了它吗？