Can we define size for font-size:x-large as a length value-CodePudding

I have looked in the moz documentation on font-size
(https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
and curious if we could define the unit for absolute size values like below,

font-size: small; /* => 10px */
font-size: medium; /* => 15px */
font-size: large; /* => 20px */
font-size: x-large;/* => 25px */

like so, instead of taking browser default.

CodePudding user response：

As per the documentation (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) those are absolute-size keywords:

Absolute-size keywords, based on the user's default font size (which is medium).

As per their definition "based on the user's default font size" you pretty much cant overload those values because they are multiples (of fractions) of the user's default font size which means you would have to change the user's default font size.

You can always set specific values in pixel tho:

font-size: 16px;

When working with a preprocessor (e.g. https://sass-lang.com/) you could define variables and use them like this:

$font-size-xxlarge:25px;

.foo {
  font-size:$font-size-xxlarge;
}

This will make font-sizes consistent in your code, wont change the actual absolute-size values for the browser tho.

CodePudding user response：

You can't change absolutes like large but you can use larger.

It's rel to the parent.

larger, smaller
Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.