CSS：根据后备字体设置字体粗细

发布于 2024-08-29 05:14:28 字数 277 浏览 6 评论 0原文

我正在尝试根据选择的字体设置元素的字体粗细。例如，我可能会尝试做这样的事情：

h1 {
    font-family: Arial Narrow, Impact, sans-serif;
    font-weight: ?;
}

假设如果用户在其系统上安装了 Arial Narrow，我希望字体粗细为“粗体”，但如果浏览器必须使用 Impact，则我希望字体粗细为“正常”，并且如果用户的系统没有这些字体，则可能是“粗体”。这可能吗？如果是这样，我将如何去做这件事？

原文

I am trying to set the font-weight for an element based on the font that gets chosen. For example, I may be trying to do something like this:

h1 {
    font-family: Arial Narrow, Impact, sans-serif;
    font-weight: ?;
}

Let's say I want the font-weight to be "bold" if the user has Arial Narrow installed on their system, but "normal" if the browser has to use Impact, and maybe "bold" if the user's system has neither of those fonts. Is this possible? If so, how would I go about doing this?

分享到QQ

分享到微博

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

发布评论

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

寄居者 2024-09-05 05:14:28

我 99.99999% 确信如果没有一些严肃的 JavaScript 魔法，这是不可能完成的，即使使用 JavaScript，也很难找出最终使用了哪种字体。

相关：在 JavaScript 中获取计算的字体系列由您真正提出

回复收藏 0 原文

木有鱼丸 2024-09-05 05:14:28

这行不通吗？未经测试。

<style>
@font-face {
    font-family: "ArialBold";
    src: local("Arial Narrow");
    font-weight: bold;
}
@font-face {
    font-family: "ImpactNormal";
    src: local("Impact");
    font-weight: normal;
}
@font-face {
    font-family: "SansSerifBold";
    src: local("sans-serif");
    font-weight: bold;
}
h1 {
    font-family: ArialBold, ImpactNormal, SansSerifBold;
}
</style>

Won't this work? Untested.

<style>
@font-face {
    font-family: "ArialBold";
    src: local("Arial Narrow");
    font-weight: bold;
}
@font-face {
    font-family: "ImpactNormal";
    src: local("Impact");
    font-weight: normal;
}
@font-face {
    font-family: "SansSerifBold";
    src: local("sans-serif");
    font-weight: bold;
}
h1 {
    font-family: ArialBold, ImpactNormal, SansSerifBold;
}
</style>

回复收藏 0 原文

~没有更多了~