如何使用字體系列中的特定樣式？

我正在嘗試創建我的第一個網站，並且正在試驗來自fontsquirrel的字體。如何使用字體系列中的特定樣式？

唯一的問題是，我只能使用一些我通過網站下載的字體。

當我的字體家族包括多個樣式時，我在正確編寫CSS代碼時遇到了很多問題。

讓我們例如LM單10常規和特種精英例如：

我對特種精英代碼如下，它的偉大工程：

@font-face { 
    font-family: 'specialelite'; 
    src: url('specialelite.eot'); 
    src: url('specialelite.eot?#iefix') format('embedded-opentype'), 
    url('specialelite.woff2') format('woff2'), 
    url('specialelite.woff') format('woff'), 
    url(' specialelite.ttf') format('truetype'), 
    url(' specialelite.svg# specialelite') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

和

.fifth {font-family: 'specialelite'; font-weight: normal; font-size: 16px; color:black;}

這種格式很容易處理，因爲特殊的精英字體家族只有一種風格。

但..當我試圖適應在FONT-FAMILY有一個以上的樣式，比如例如LM單聲道10家，它根本不起作用這種格式....

http://www.fontsquirrel.com/fonts/Latin-Modern-Mono

我不知道錯誤是指我指的是字體家族的方式，還是我寫的url錯誤......請您在回覆中提供一個代碼示例嗎？

讓我們來說說「拉丁現代單色燈10普通」。 font-weight和font-style屬性將如何改變？我只是不明白...

來源

2016-02-29 Alexandros

當我在您提供的鏈接下載資源時，它將每種字體樣式顯示爲完全不同的字體系列。

這是斜體版本：

@font-face { 
    font-family: 'latin_modern_mono10_italic'; 
    src: url('lmmono10-italic-webfont.eot'); 
    src: url('lmmono10-italic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('lmmono10-italic-webfont.woff') format('woff'), 
     url('lmmono10-italic-webfont.ttf') format('truetype'), 
     url('lmmono10-italic-webfont.svg#latin_modern_mono10_italic') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

}

這是普通版本：

@font-face { 
    font-family: 'latin_modern_mono10_regular'; 
    src: url('lmmono10-regular-webfont.eot'); 
    src: url('lmmono10-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('lmmono10-regular-webfont.woff') format('woff'), 
     url('lmmono10-regular-webfont.ttf') format('truetype'), 
     url('lmmono10-regular-webfont.svg#latin_modern_mono10_regular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

}

爲了使用這些字體原樣，則需要指定適當的font-family每當你使用它們。

例如：

.fifth { 
    font-family: 'latin_modern_mono10_regular'; 
    font-weight: normal; 
    ... 
}

或

.fifth { 
    font-family: 'latin_modern_mono10_italic'; 
    font-weight: normal; 
    ... 
}

來源

2016-02-29 19:38:59 Quantastical

這是一個很好的答案Quantastical。你爲什麼在那裏使用「webfont」？特殊的精英字體在沒有webfont措辭的情況下工作。 – Alexandros

....但它仍然無法工作....我在這裏失去了我的頭腦...我有許可證和字體都在與HTML/CSS文檔相同的文件...這裏發生了什麼？這感覺就像一個暮光之城片段... – Alexandros

更新與您遇到問題的字體的實施問題。 – Quantastical

定期和斜體版本：

@font-face { 
    font-family: 'specialelite'; 
    src: url('specialelite.eot'); 
    src: url('specialelite.eot?#iefix') format('embedded-opentype'), url('specialelite.woff2') format('woff2'), url('specialelite.woff') format('woff'), url(' specialelite.ttf') format('truetype'), url(' specialelite.svg# specialelite') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'specialelite'; 
    src: url('specialelite_italic.eot'); 
    src: url('specialelite_italic.eot?#iefix') format('embedded-opentype'),  url('specialelite_italic.woff2') format('woff2'), url('specialelite_italic.woff') format('woff'), url(' specialelite_italic.ttf') format('truetype'), url(' specialelite_italic.svg# specialelite') format('svg'); 
    font-weight: normal; 
    font-style: italic; 
}

現在，你可以用這個常規：font-style: normal

.fifth {font-family: 'specialelite'; font-style: normal; font-size: 16px; color:black;}

或本爲斜體：font-style: italic

.fifth {font-family: 'specialelite'; font-style: italic; font-size: 16px; color:black;}

來源

2016-02-29 21:09:16 naser

ty naser，但是我對LM家族有問題，不是特殊的精英;） – Alexandros

如何使用字體系列中的特定樣式？

回答

相關問題