如果在CSS中使用了备用字体，是否有可以使用的触发器？

Question

如果在CSS中使用了备用字体，是否有可以使用的触发器？

5

我正在使用这项服务在我的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，则不会显示粗体。

是否有一种方法可以指定一个新的规则集，仅在字体默认为Verdana时应用于标签？

- Marty

2个回答

0

当你有多个字重（如轻体、超轻体、紧缩粗体、半粗体等）时，仅使用相同的font-family属性来设置font-weight是无效的。

- Anandasama

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tw16 · Accepted Answer

无需查找触发器，以确定是否使用了备用字体。

您需要做的是在@font-face规则中设置font-weight，并使用相同的字体族名称。因此，现在您将其称为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时，它将显示字体的粗体版本等。