Font

Font Weight

Can I use ?Can I use ?
classproperties
font-weight:weight / font:weight / f:weightfont-weight: weight
font-weight:normalfont-weight: normal
font:lighterfont-weight: lighter
font:bolderfont-weight: bolder
font:thinfont-weight: 100
font:extralightfont-weight: 200
font:lightfont-weight: 300
font:regularfont-weight: 400
font:mediumfont-weight: 500
font:semiboldfont-weight: 600
font:boldfont-weight: 700
font:extraboldfont-weight: 800
font:heavyfont-weight: 900

Overview

The font weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.

Aa
font:thin
Aa
font:extralight
Aa
font:light
Aa
font:regular
Aa
font:medium
Aa
font:semibold
Aa
font:bold
Aa
font:extrabold
Aa
font:heavy
Aa
font:normal
Aa
font:lighter
Aa
font:bolder

Applying with functions

<div class="font-weight:$(value)">...</div>

Master supports native CSS variables and functions, just add var(--key) or use shorthand$(key) for variables.

You can also use calc(expression), env(expression) and other CSS functions if the property supports it.

To learn more, see the Functions documentation.

Conditionally apply

States and selectors

<div class="font-weight:normal:hover">...</div>

Master supports all native CSS selectors, just add :hover, :disabled, chaining, combinators and other CSS selectors as usual.

To learn more, see the Selectors documentation.

Responsive breakpoints

<div class="font-weight:normal@sm">...</div>

Responsive breakpoints can be applied to all styles. Some available breakpoints are 3xs, 2xs, xs, sm,md, lg, xl, 2xl, 3xl, 4xl. Arbitrary breakpoints can be specified through comparison operators >, >=, <, <=.

To learn more, see the Breakpoints documentation.

<div class="font-weight:normal@print">...</div>

Master supports media types like print, screen, speech, all, and other media queries.

To learn more, see the Media Queries documentation.

Dark mode and color schemes

<div class="font-weight:normal@dark">...</div>

Master uses the selector html.dark to support color schemes. Now, you can easily fine-tune your style for the color schemes.

To learn more, see the Color Schemes documentation.


© Aoyue Design LLC.
Issue on this page
Edited byAronLola