html - 如何更改字体

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

我试图将 h 标签更改为“OpenSans-Italic”，但我不知道如何调用特定字体。

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