如果在CSS中使用回退字体,是否可以使用触发器？

Question

我正在使用此服务@font-face在我的CSS中创建规则.我所做的是创建了两个规则,一个用于正常重量字体,另一个用于粗体重量版本.像这样:

@font-face
{
    font-family: 'CenturyGothicRegular';
    src: url('/static/fonts/gothic_2-webfont.eot');
    src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'),
          url('/static/fonts/gothic_2-webfont.woff') format('woff'),
          url('/static/fonts/gothic_2-webfont.ttf') format('truetype'),
          url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
... and another for 'CenturyGothicBold'

然后,我将我的网站默认的整体字体恢复为Verdana,如下所示:

body
{
    font-family: "CenturyGothicRegular", Verdana;
    font-size: 14px;
}

并制定了一个小规则,<strong>以便不使正常的重量版本大胆(似乎只是伸展它),将使用粗体重版本:

strong
{
    font-weight: normal;
    font-family: 'CenturyGothicBold';
}

我可以预见的一个问题是,如果字体默认为Verdana,则不会出现粗体.

有没有办法可以指定一套新的规则<strong>,只有在字体默认为Verdana时才适用？

Answer 1

无需找到触发器来查看是否使用了后备字体。

您需要做的是font-weight在@font-face规则中设置使用相同的姓氏。所以你现在可以将其称为CenturyGothic：

@font-face {
    font-family: 'CenturyGothic'; /* this used to be CenturyGothicRegular */
    src: url('/static/fonts/gothic_2-webfont.eot');
    src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/gothic_2-webfont.woff') format('woff'),
         url('/static/fonts/gothic_2-webfont.ttf') format('truetype'),
         url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CenturyGothic'; /* this used to be CenturyGothicBold but the urls still need to point to the files they were pointing at */
    src: url('/static/fonts/gothic_2-webfont.eot');
    src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/gothic_2-webfont.woff') format('woff'),
         url('/static/fonts/gothic_2-webfont.ttf') format('truetype'),
         url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg');
    font-weight: bold;
}

body{
    font-family: "CenturyGothic", Verdana;
    font-size: 14px;
}

strong{
    font-weight: bold;
}

这会将两种字体合并为一种，font-family使其像任何其他字体一样工作font-family，即当您制作它时，bold它将显示该字体的粗体版本等。