如何更改字体

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-Italic”的 h 标签，但我不知道如何调用特定字体。

Answer 1

基本上对于某些字体系列，您必须加载单独的字体系列，例如。对于粗体，您有负载差异。文件和斜体字体你必须加载差异。文件

加载网页/自定义字体的正确方法是

@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（或任何其他元素），如果您需要斜体，请使用

h2 {
font-family: my_italic_fonts;
}

Answer 2

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