font-weight#

Introduction#

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.

Examples#

css-apisrc/font-weight/App.tsx

Preview

Syntax#

/* Keyword values */
font-weight: normal;
font-weight: bold;

/* Numeric keyword values */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: 1000;

Values#

• Default normal
  Normal font weight. Same as 400.

• bold
  Bold font weight. Same as 700

• <number>
  A <number> value between 1 and 1000, inclusive. Higher numbers represent weights that are bolder than (or as bold as) lower numbers.

Best Practices#

• Do not using font-weight with font-family. Currently, lynx font-family is just a key-value mapping not a real 'family'. And using other font-weight may cause font-family not working.

Formal definition#

Formal syntax#

Difference with Web#

• Not support border and lighter

• Numeric types currently only support integer values from '100' to '1000'.

• The fallback logic of glyph mapping failure will vary on different platforms and system versions. In the worst case, the system default font may be fallback, resulting in the failure of custom fonts.

Compatibility#