2012-01-02 80 views
15

如何使用CSS創建非常細的字體,如http://www.google.com/landing/newgadgets/CSS非常薄的字體?

現在我正在使用這個,但我在Mac上,我不認爲Windows支持「Helvetica Neue」。

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

任何有關薄而脆的字體的想法?

+1

Helvetica Neue字體支持Windows。它在Windows上非常難看*。 – BoltClock 2012-01-02 22:37:41

+2

你必須引用任何有空格的字體值,應該是'font-family:「Helvetica Neue」,Helvetica,Arial,sans-serif;' – 2012-01-02 22:39:08

+0

「Helvetica Neue」不應該被引號包圍嗎? – fge 2012-01-02 22:39:38

回答

16

谷歌是用他們的字體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/

+0

+1解釋 – benesch 2012-01-02 23:10:02

+0

什麼是「低級」瀏覽器? – BoltClock 2012-01-03 03:12:05

+2

@BoltClock術語用於描述*較舊的瀏覽器* - 以下是使用該術語的帖子:http://msdn.microsoft.com/en-us/library/x3k2ssx2(v=vs.85).aspx – xandercoded 2012-01-03 03:16:02

6

只需從Google's Web Fonts抓住該字體。

選擇所需的字體,選擇樣式(大膽斜體等)和谷歌會給你一個<link />元素在你的HTML包括。

即當前字體被稱爲打開三世

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

現在你可以使用它:

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