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

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

h2 {
font-family: my_italic_fonts;
}

如何更改字体

2 个答案: