CSS非常薄的字体?

时间:2012-01-02 22:35:23

标签: html css

如何使用CSS创建非常轻薄的字体,例如http://www.google.com/landing/newgadgets/

现在我正在使用它,但我在Mac上,我不认为Windows上支持“Helvetica Neue”。

h1{
  font-size:64px;
  font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight:100;
}

任何关于薄而清晰的字体的想法?

3 个答案:

答案 0 :(得分:17)

Google正在使用他们的字体API 和CSS的@font-face

在其代码中查看以下参考:

<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin" rel="stylesheet">

以下是“注册”所述字体的确切定义:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v5/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

然后他们只是将该字体应用于element / s:

h1, h2, h3, h4, blockquote, q, .maia-nav ul {
   font-family: 'open sans',arial,sans-serif;
}

注意: @font-face字体在下层浏览器中不会呈现清晰。如果您需要支持他们,请尝试 - http://cufon.shoqolate.com/

答案 1 :(得分:7)

只需从Google's Web Fonts抓取该字体。

选择所需的字体,选择样式(粗体斜体等),Google会为您提供<link />元素HTML。

当前字体称为打开Sans

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

现在你可以使用它了:

font-family: 'Open Sans', sans-serif;

答案 2 :(得分:3)

我使用Google字体。一个很好的例子:

https://fonts.google.com/specimen/Raleway