Question

我正在使用this service在我的CSS中创建@font-face规则。我所做的是创建了两个规则，一个用于正常重量字体，另一个用于粗体重量版本。像这样：

@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时，它会显示字体的粗体等。< / p>

Answer 2

只有font-weight使用font-family才能使用weight，如Light，超轻，浓缩粗体，demi粗体等等。

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

2 个答案: