开发者

CSS: set font weight depending on fallback font

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 d开发者_如何学编程oing this?


I'm 99.99999% sure this can't be done without some serious JavaScript magic, and even with JavaScript it's damn difficult to find out which font was used in the end.

Related: get computed font-family in JavaScript asked by yours truly


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜