如何改變字體的臉

Question

所以我想要做的是添加新的字體到我的網站，但問題，我卡住了，我需要從Open Sans 4種類型的文本添加：

粗體，普通，粗體，斜體

此前我已經添加了其他字體，但它始終是來自不同系列的字體。這是我的代碼：

@font-face { font-family: 'Josefin'; src: url("font/Josefin.ttf"); } 
@font-face { font-family: 'Roboto'; src: url("font/Roboto.ttf"); } 
/* 
@font-face { font-family: 'OpenSans'; src: url("font/OpenSans-Regular.ttf"); } 
@font-face { font-family: 'OpenSans'; src: url("font/OpenSans-Bold.ttf"); } 
@font-face { font-family: 'OpenSans'; src: url("font/OpenSans-BoldItalic.ttf"); } 
@font-face { font-family: 'OpenSans'; src: url("font/OpenSans-Italic.ttf"); } 
*/ 

h1, h2, h3, h4, h5, .bold{ font-family: 'Josefin'; } 
p, li, ul, ol, a, .light{ font-family: 'Roboto'; } 

我試圖將其更改爲「OpenSans斜體」的H標籤，但我不知道如何調用特定的字體。

Answer 1

@font-face { 
font-family: 'OpenSans'; 
font-weight: normal; 
font-style: normal; 
src: url('OpenSans-Regular.eot#') format('eot'), 
       url('OpenSans-Regular.woff') format('woff'), 
       url('OpenSans-Regular.ttf') format('truetype'), 
       url('OpenSans-Regular.svg#svgOpenSans') format('svg'); 
} 

@font-face { 
font-family: 'OpenSans'; 
font-weight: bold; 
font-style: normal; 
src: url('OpenSans-Bold.eot#') format('eot'), 
       url('OpenSans-Bold.woff') format('woff'), 
       url('OpenSans-Bold.ttf') format('truetype'), 
       url('OpenSans-Bold.svg#svgOpenSans') format('svg'); 
} 

@font-face { 
font-family: 'OpenSans'; 
font-weight: bold; 
font-style: italic; 
src: url('OpenSans-BoldItalic.eot#') format('eot'), 
       url('OpenSans-BoldItalic.woff') format('woff'), 
       url('OpenSans-BoldItalic.ttf') format('truetype'), 
       url('OpenSans-BoldItalic.svg#svgOpenSans') format('svg'); 
} 

@font-face { 
font-family: 'OpenSans'; 
font-weight: normal; 
font-style: italic; 
src: url('OpenSans-Italic.eot#') format('eot'), 
       url('OpenSans-Italic.woff') format('woff'), 
       url('OpenSans-Italic.ttf') format('truetype'), 
       url('OpenSans-Italic.svg#svgOpenSans') format('svg'); 
} 

Answer 2

基本上對於某些字體系列，您必須爲例如加載單獨的字體系列。爲粗體你有加載差異。文件和斜體字體，你必須加載差異。文件

正確的方式來加載網頁/自定義字體是

@font-face { 
    font-family: my_bold_fonts; 
    src: url(path_to_font_file_for_bold.woff); 
    font-weight: bold; 
} 
@font-face { 
    font-family: my_italic_fonts; 
    src: url(path_to_font_file_for_italic.woff); 
    font-weight: normal; 
    font-style: italic; 
} 

，同樣爲其他字體粗細

現在，如果你有使用加粗字體爲H1

然後，你必須使用

h1 { 
    font-family: my_bold_fonts; 
} 

和h2（或任何其他元素），如果你需要斜體，那麼你u SE

h2 { 
font-family: my_italic_fonts; 
}