css - 如果 @font-face 不起作用，则以粗体显示文本

Question

我正在使用 css @font-face 函数来定义自定义字体。该字体称为“Myriad Pro Bold”，作为后备，我使用 Arial/Sans-Serif。

@font-face { font-family: MyriadProBold; src: url('fonts/myriadpro_bold.otf'); }
h3 { font-family: MyriadProBold, Arial, Sans-Serif; }

只有在显示 Arial 或其他 Sans-Serif 字体时才需要 font-weight: bold; 元素。如果我将 font-weight: bold; 添加到标记并加载 MyriadProBold，粗体字体会变得特别粗，看起来很难看。

所以实际上我正在寻找这样的东西

if h3 font is MyriadProBold
  font-weight: normal;
else
  font-weight: bold;

感谢帮助，谢谢!

Answer 1

Myriad Pro Bold 是 Myriad Pro 系列的粗体字体，应该这样声明:

@font-face {
    font-family: "Myriad Pro";
    src: url('fonts/myriadpro_bold.otf');
    font-weight: bold;
}

然后你可以简单地让 h3 拥有它们的默认粗体，或者如果有一些“CSS 重置”或其他干扰它的代码明确声明:

h3 { font-weight: bold; }

现在您只需以自然的方式声明字体系列:

h3 { font-family: "Myriad Pro", Arial, sans-serif; }