Search code examples
htmlcssfont-face

@font-face' weight - aliases

I need to use a external font for a website. On sepcify the @font-face i like to use the alias instead of the Number-representation. Therefore bold is an alias for 700. normal is the alias for 400.

My questions:

  1. What is the numerical representation of alias lighter?
  2. What are the HTML-Tags that naturallly use different alias than normal/inherited? (i only know the <b>-tag and the <h*>-tag that uses the bold alias)
Solution

    1. The value resulting from computing bolder and lighter varies based on the value that is inherited from the element's parent, so there is no singular numeric representation of either keyword. See the section on the font-weight property.

      Because bolder and lighter are special values, it is not necessary to declare them in a @font-face rule. The spec says this under the font property descriptors (which include the font-weight descriptor, not to be confused with the font-weight CSS property):

      The values for these descriptors are the same as those for the corresponding font properties except that relative keywords are not allowed, ‘bolder’ and ‘lighter’.

    2. This depends on the browser default styles, but section 10 of the HTML5 spec has some guidelines that most browsers follow. Notably, the b and strong elements actually use bolder, not bold.

      The elements listed with different weights in the HTML5 default stylesheet guidelines are

      b, strong { font-weight: bolder; }

      from section 10.3.4, followed by

      h1 { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
h2 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }
h3 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; font-weight: bold; }
h4 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight: bold; }
h5 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
h6 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }

      from section 10.3.7, and

      th { font-weight: bold; }

      from section 10.3.9.