如果 CSS 中使用后备字体，我可以使用触发器吗？

发布于 2024-11-28 03:33:53 字数 1199 浏览 1 评论 0原文

我正在使用此服务在中创建 @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
{
    font-weight: normal;
    font-family: 'CenturyGothicBold';
}

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

有没有一种方法可以为 指定一组新规则，仅在字体默认为 Verdana 时才适用？

原文

I'm using this service to create @font-face rules in my CSS. What I've done is created two rules, one for the normal weight font and another for the bold weight version. Like so:

@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'

I've then made the overall font for my site default back to Verdana like so:

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

And made a little rule for <strong> so that rather than making the normal weight version bold (which just seems to stretch it), the bold weight version will be used:

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

An issue I can foresee here is that if the font has defaulted to Verdana, bold won't be present.

Is there a way that I can specify a new set of rules for <strong> that only apply if the font has defaulted to Verdana?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

撩心不撩汉 2024-12-05 03:33:53

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

您需要做的是使用相同的姓氏在 @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 一样工作即，当您将其设置为粗体时，它将显示字体的粗体版本等。

There is no need to find a trigger to see if a fall back font has been used.

What you need to do is set the the font-weight in the @font-face rule, using the same family name. So you would now call it 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;
}

This will combine the two fonts into one font-family allowing it to act like any other font-family i.e. when you make it bold it will display the bold version of the font etc.

回复收藏 0 原文