1

I'm looking to recreate the "Sign in to iCloud" text on http://beta.icloud.com

I have already copied all the styles attributed to that line of text, and everything is in order apart from the thickness of the text. I see Apple has applied the font-weight 300 to the style, which should and does make it thinner, however when I copy and paste the exact same code my browser renders it thicker on my own webpage. My question is, how is Apple making the text thin like that or how can I achieve the same effect?

The code from them that I have used so far is:

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;

Any ideas on what could be causing it to render at normal thickness? I have no conflicting styles and this is the only code relating to my line of text

4

2 回答 2

1

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

在 Chrome 中呈现的文本

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

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

于 2013-08-30T14:13:09.013 回答
0

试试 Avenir Ultra Light,它是一种看起来与它相似的细字体

http://www.typophile.com/node/42590

于 2013-08-30T13:07:40.300 回答