Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: set font weight depending on fallback font

Tags:

css

fonts

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?

like image 731
Elias Zamaria Avatar asked Apr 15 '10 17:04

Elias Zamaria


People also ask

How do you override font weight in CSS?

font-weight: { 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | bold | bolder | lighter | normal | inherit } ; So in your example, the font-weight from the #speciality_test is used.

What is font weight inherit?

Definition and Usage The font-weight property sets how thick or thin characters in text should be displayed.

What is CSS font fallback?

So basically fallback fonts are used when the current font isn't available. For example, if your CSS selector looked like this: h1 { font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif; } The website will basically parse this as: Is 'Roboto' available?


1 Answers

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

like image 110
Pekka Avatar answered Sep 22 '22 04:09

Pekka