如何添加多個字體到單獨的標籤？

Question

對於我正在處理的網站，客戶希望使用Roboto（由Google）作爲他們的主要字體。網頁上的幾個元素使用不同風格的Roboto，例如Roboto Light的Roboto Thin。但是，我使用了@ font-face選擇器來使瀏覽器呈現Roboto中的文本。我的問題是設計需要使用不同的權重，而不是標準的Roboto文本。我不確定我是否足夠清楚。如果您需要澄清或具體示例，請詢問。

PS：我發現了一個類似的線程，但是，他們使用系統字體與@ font-face結合。 Using @fontface, how do I apply different styles to different font-families?

Answer 1

如何添加幾個font-faces到單獨的標籤？

@font-face { 
    font-family: 'Crystal'; 
    src: url('../fonts/crystalnormal.eot'); 
    src: url('../fonts/crystalnormal.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/crystalnormal.woff') format('woff'), 
     url('../fonts/crystalnormal.ttf') format('truetype'), 
     url('../fonts/crystalnormal.svg#crystalnormal') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'FreestyleC'; 
    src: url('../fonts/freestyle.eot'); 
    src: url('../fonts/freestyle.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/freestyle.woff') format('woff'), 
     url('../fonts/freestyle.ttf') format('truetype'), 
     url('../fonts/freestyle.svg#freestyle') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

foo { 
    font-family:FreestyleC; 
} 
bar { 
    font-family:Crystal; 
}