如何改变字体

Question

所以我想要做的是给我的网站添加新的字体，但问题是，我被卡住了，我需要从Open添加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-意大利语”，但我不知道如何称呼特定的字体。

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

基本上，对于一些字体家族，你必须加载单独的字体系列为例。为了大胆，你有负载差异。文件和斜体字体，你必须加载差异。文件

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

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