html - 如何为每种字体样式定义单独的字体 - CSS

Question

我有一个 HTML 页面，包含各种字体样式，例如normal、bold、italics、 oblique 等，使用 CSS 定义。我想为每个 font-style 使用单独的字体，例如，myboldfont 用于 bold，myitalicsfont 用于 斜体 等。我使用@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 使用相同的名称，但您将更改不同的属性。