Reference bold version without using font-weight: bold?

综合技术 2018-03-07

I'm using webfonts on a site. For certain headings ( h1
, h2
, etc.) I'm using bold variants (and setting font-weight
to normal) because they look much better than using the regular variant and leaving the h-tags with the default bold weight. It's necessary to specify font-weight: normal
because otherwise "the bold is bolded", which looks really terrible.

The problem I'm having is, how do I specify standard web fonts as fallback fonts and have the bold setting "restored"?

So for example I might do something like:

@font-face {
    font-family: "My bold webfont";
    src: url("url/of/webfont/bold/variant");
}

h1 {
    font-family: "My bold webfont", Arial, sans-serif;
    font-weight: normal; 
}

As long as the webfont is present we have no problem, but if the webfont fails we end up with non-bold Arial.

Is there a way to specify "Arial Bold" in the font-family
of the h1
(I know that doesn't work, but it's the desired goal)? Or perhaps in the @font-face
definition I can say "this applies only to the bold version of whatever it's assigned to" – so I can omit the font-weight: normal
from the h1
style?

Problem courtesy of: Bob Meador

Solution

Try specifying font-weight: bold
in both places:

@font-face {
    font-family: "My bold webfont";
    src: url("url/of/webfont/bold/variant");
    font-weight: bold;
}

h1 {
    font-family: "My bold webfont", Arial, sans-serif;
    font-weight: bold;
}

Here's a demo.
p#one
shows this technique in use; if you look at it in a browser that doesn't support WOFF webfonts, you'll see the default font in bold.

Solution courtesy of: Ryan

您可能感兴趣的

Google Server for Webfont’s or Self-Hosted? I am using Google Webfont's with my website. Should i let the fonts stay hosted on Google's Server and reference the required stylesheet(s) from my ...
Python同步谷歌Webfont 中午发现,360公共前端库,挂了,网站加载速度奇慢,不得已换成科大的,但是考虑到国外的访问情况,只好自行托管了。 https:// fonts.googleapis.com/cs s?family=Roboto:100,200,300,400,600 ht...
Dear Alphabettes: webfont versus web font Dear Caren, Is it webfont or web font? Thanks, Bianca Dear Bianca, As you pointed out to me recently, there’s a certain logic to web font ...
0
CSS3 Recipes

责编内容来自:CSS3 Recipes (本文源链)
阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。