如何为每个字体定义单独的字体-style- CSS

Question

我有一个超文本标记语言页面，包含各种font-style，如normal，bold，italics，oblique等，使用CSS定义。我想为每个font-style使用不同的字体，例如，myboldfont用于bold，myitalicsfont用于italics等。我使用@font-face导入字体，例如，

@font-face {
    font-family: "MyNormal";
    font-style: normal;
    font-weight: normal;
    src: url("mynormalfont.woff") format("woff");
}
@font-face {
    font-family: "MyBold";
    font-style: normal;
    font-weight: normal;
    src: url("myboldfont.woff") format("woff");
}
@font-face {
    font-family: "MyItalics";
    font-style: normal;
    font-weight: normal;
    src: url("myitalicsfont.woff") format("woff");
}
@font-face {
    font-family: "MyOblique";
    font-style: normal;
    font-weight: normal;
    src: url("myobliquefont.woff") format("woff");
}

并导入普通、斜体、粗体和斜体字体。我将body样式定义为；

body{
  font-family: MyNormal, MyBold, MyItalics, MyOblique;
}

这是否足以定义主体中所有font-style的样式？我的意思是，如果我将font-style: italic或font-weight: bold赋值给一个元素，会使用斜体字体还是粗体字体？或者我应该怎么做才能做到这一点，这样如果我对任何元素使用font-weight: bold，就应该使用myboldfont.woff。

Answer 1

这应该是可行的：

@font-face {
    font-family: "MyFont";
    font-style: normal;
    font-weight: normal;
    src: url("mynormalfont.woff") format("woff");
}
@font-face {
    font-family: "MyFont";
    font-style: normal;
    font-weight: bold;
    src: url("myboldfont.woff") format("woff");
}

还有这个：

...{
   font-family:"MyFont";
   font-weight:bold;
}...

然后，您将始终对font-family使用相同的名称，但您需要更改不同的属性。

Answer 2

问题中列出的CSS是最安全的方法。当超过1个粗细或链接到字体系列名称的粗细或样式超过4个时，IE8会出现显示问题。对每个字体变体使用唯一的字体系列名称可以避免此问题。

当对每个字体变体使用唯一的字体系列名称时，没有必要在@ font -face声明或使用该字体的HTML元素的CSS规则中标识粗细或样式。

此外，要支持尽可能多的浏览器，请组合使用.woff、.ttf和.eot作为嵌入式字体。这是TypeKit使用的方法：

@font-face {
    font-family: 'MyNormal';
    src: url('mynormalfont.eot');
    src: url('mynormalfont.eot?#iefix')
            format('embedded-opentype'),
         url('mynormalfont.woff') format('woff'),
         url('mynormalfont.ttf') format('truetype');
}
@font-face {
    font-family: 'MyBold';
    src: url('myboldfont.eot');
    src: url('myboldfont.eot?#iefix')
            format('embedded-opentype'),
         url('myboldfont.woff') format('woff'),
         url('myboldfont.ttf') format('truetype');
}
@font-face {
    font-family: 'MyItalics';
    src: url('myitalicsfont.eot');
    src: url('myitalicsfont.eot?#iefix')
            format('embedded-opentype'),
         url('myitalicsfont.woff') format('woff'),
         url('myitalicsfont.ttf') format('truetype');
}
@font-face {
    font-family: 'MyOblique';
    src: url('myobliquefont.eot');
    src: url('myobliquefont.eot?#iefix')
            format('embedded-opentype'),
         url('myobliquefont.woff') format('woff'),
         url('myobliquefont.ttf') format('truetype');
}

字体变体的用法如下：

p {
    font-family: MyNormal, sans-serif;   /* Still useful to add fallback fonts */
    font-size: 12px;
}
h2 {
    font-family: MyBold, sans-serif;
    font-size: 20px;
}

缺点是，必须在使用其中一种字体变体的每个CSS规则中指定字体系列名称。但这可以被认为是目前广泛的跨浏览器支持所必须付出的代价。