2012-01-02 36 views
15

Làm cách nào để tạo phông chữ rất mỏng bằng CSS, như tại http://www.google.com/landing/newgadgets/?Phông chữ CSS rất mỏng?

Hiện tại tôi đang sử dụng, nhưng tôi đang dùng mac và tôi không nghĩ rằng "Helvetica Neue" được hỗ trợ trên cửa sổ.

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

Bất kỳ ý tưởng nào cho phông chữ mỏng, sắc nét?

+1

Helvetica Neue được hỗ trợ trên Windows nếu được cài đặt. Đó là * thực sự xấu xí * trên Windows mặc dù. – BoltClock

+2

Bạn phải trích dẫn bất kỳ giá trị phông chữ nào có dấu cách, phải là "font-family:" Helvetica Neue ", Helvetica, Arial, sans-serif;' –

+0

Không nên "Helvetica Neue" được bao quanh bởi dấu ngoặc kép? – fge

Trả lời

16

Google là sử dụng phông chữ của họ API và CSS của @font-face

Xem tài liệu tham khảo sau trong mã của họ:

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

Dưới đây là định nghĩa chính xác mà "đăng ký" nói chữ:

@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'); 
} 

Sau đó, họ chỉ cần áp dụng phông chữ đó cho phần tử/s:

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

Lưu ý:@font-face phông chữ này không làm crisply trên các trình duyệt downlevel. Nếu bạn cần hỗ trợ họ, hãy thử - http://cufon.shoqolate.com/

+0

+1 để được giải thích – benesch

+0

Trình duyệt "cấp thấp" là gì? – BoltClock

+2

@BoltClock thuật ngữ được sử dụng để mô tả * các trình duyệt cũ hơn * - đây là bài đăng sử dụng thuật ngữ đó: http://msdn.microsoft.com/en-us/library/x3k2ssx2(v=vs.85).aspx – xandercoded

6

Chỉ cần lấy phông chữ đó từ Google's Web Fonts.

Chọn phông chữ mà bạn muốn, chọn phong cách (đậm, nghiêng, vv) và Google sẽ cung cấp cho bạn một yếu tố <link /> để đưa vào HTML của bạn.

Đó phông chữ hiện tại được gọi là Open Sans:

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

Bây giờ bạn có thể sử dụng nó:

font-family: 'Open Sans', sans-serif; 
Các vấn đề liên quan