Opera 18 不会在页面上加载自定义字体的粗体变体

Question

在我们的网站上，我们有一些字体。我像这样嵌入它们

@font-face {
    font-family: "Calibri Light";
    src: url("fonts/calibri/light/calibri-light.eot?") format("eot"),
         url("fonts/calibri/light/calibri-light.woff") format("woff"),
         url("fonts/calibri/light/calibri-light.ttf") format("truetype"),
         url("fonts/calibri/light/calibri-light.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Calibri";
    src: url("fonts/calibri/regular/calibri.eot?") format("eot"),
         url("fonts/calibri/regular/calibri.woff") format("woff"),
         url("fonts/calibri/regular/calibri.ttf") format("truetype"),
         url("fonts/calibri/regular/calibri.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Calibri Bold";
    src: url("fonts/calibri/bold/calibri-bold.eot?") format("eot"),
         url("fonts/calibri/bold/calibri-bold.woff") format("woff"),
         url("fonts/calibri/bold/calibri-bold.ttf") format("truetype"),
         url("fonts/calibri/bold/calibri-bold.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Caviar Dreams";
    src: url("fonts/caviar-dreams/regular/caviar-dreams.eot?") format("eot"),
         url("fonts/caviar-dreams/regular/caviar-dreams.woff") format("woff"),
         url("fonts/caviar-dreams/regular/caviar-dreams.ttf") format("truetype"),
         url("fonts/caviar-dreams/regular/caviar-dreams.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Caviar Dreams Bold";
    src: url("fonts/caviar-dreams/bold/caviar-dreams-bold.eot?") format("eot"),
         url("fonts/caviar-dreams/bold/caviar-dreams-bold.woff") format("woff"),
         url("fonts/caviar-dreams/bold/caviar-dreams-bold.ttf") format("truetype"),
         url("fonts/caviar-dreams/bold/caviar-dreams-bold.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "TeX Gyre Adventor";
    src: url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.eot?") format("eot"),
         url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.woff") format("woff"),
         url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.ttf") format("truetype"),
         url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

问题是Caviar Dreams Bold 没有加载。它只是没有出现在 Inspector 的 Sources 选项卡中（所有其他都显示）。 Chrome 32 运行良好。不会引发错误或警告。

我使用这样的字体：

#feedback input[type="submit"] {
    text-transform: uppercase;
    font-family: "Caviar Dreams Bold", "Calibri", sans-serif;
    font-variant: small-caps;
}

Opera 使用的是 Calibri 字体。

更新 1

Calibri Bold 似乎也被忽略了。为什么粗体字体会被忽略？

更新 2

请不要惊讶我没有在 @font-face 查询中指定 font-weight: bold：由于某些原因它不起作用，我必须快速完成我的工作。因此，不同的font-family 没有被加载的事实对我来说似乎很有趣。更有趣的是，我们知道 Opera 的渲染应该像 Blink 一样工作。

Answer 1

Caviar Dreams Bold 字体实际上是否包含小型大写字母？如果不是，Opera 可能会断定请求 glyps 无法找到，并将回退到 Calibri。如果删除 font-variant: small-caps; 规则会发生什么？

编辑： 有趣的错误报告，说明为什么 Blink 不回退到“小型大写字母合成”（因为它显然被称为）：https://code.google.com/p/chromium/issues/detail?id=298970 似乎从您的 @ 中删除了 SVG 字体987654323@ 规则可以解决问题。