font-weight is an important knowledge point in the front-end that seems simple but actually involves browser rendering mechanism, font file characteristics, and design consistency.

1. Basic Concept: Control of Font Thickness

font-weight used to define Font thickness (font weight) 。

font-weight: normal;
font-weight: bold;
font-weight: 500;

2. Available value types (two types)

Type	Example	Description
Keywords	normal, bold, bolder, lighter	Universal values, can be inherited and calculated
Numbers	1 ~ 1000, not restricted to steps of 100	Rendering depends on font support and fallback

Keyword correspondence (most fonts)

Keyword	Actual equivalent value
normal	400
bold	700
bolder	Thicker than the parent element (non-fixed)
lighter	Thinner than the parent element (not fixed)

💡Note: bolder/lighter are relative values, and the browser will calculate an approximate level based on the weight of the parent element.

3. Numeric Mapping (Standard Level 9)

Numerical value	English name	Chinese description
100	Thin / Hairline	Very fine body
200	Extra Light / Ultra Light	Extra Fine
300	Light	fine body
400	Normal / Regular	Regular font
500	Medium	Medium
600	Semi Bold / Demi Bold	Semi Bold
700	Bold	Bold
800	Extra Bold / Ultra Bold	Extra Bold
900	Black/Heavy	Black, super bold

4. Font file support for font weight

⚠️ Key traps!

Not all fonts support all weights from 100 to 900. Many fonts have only a few styles, for example:

Fonts	Available weights
Arial	400, 700
Microsoft YaHei Microsoft YaHei	400, 700
PingFang SC	300, 400, 500, 600, 700
Roboto / Open Sans	Full series support
Noto Sans CJK	100~900 available in all series

If you set a font weight that is not supported by the font, the browser will automatically Choose the closest available weight 。

5. Inheritance rules of font-weight

• By default, font-weight is an inheritable property.
• When the child element is undefined, it inherits the font weight of the parent element;
• If bolder / lighter is set, it will be adjusted relative to the parent's font-weight:

Parent weight	lighter	bolder
100	100	400
200~300	100	400
400~500	100	700
600~700	400	900
800~900	700	900

6. Modern font technology: Variable Fonts (variable fonts)

Modern browser support variable font , allowing dynamic adjustment of font weight within a font file.

@font-face {
  font-family: 'Inter Variable';
  src: url('Inter-VariableFont_slnt,wght.ttf') format('truetype-variations');
  font-weight: 100 900; /* 支持范围 */
}

.text {
  font-family: 'Inter Variable';
  font-weight: 537; /* 在该可变字体声明支持的范围内插值 */
}

💡 Advantages:

• One variable font can cover its declared weight range, rather than every possible weight
• save loading;
• Support animation (such as font gradient thickening).

7. Practical combat: common strategies

1️⃣ Global word weight control (project specifications)

body {
  font-weight: 400;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}
strong, b {
  font-weight: 600;
}

2️⃣ Control through Tailwind (commonly used in development)

<p class="font-light">Light 300</p>
<p class="font-normal">Normal 400</p>
<p class="font-medium">Medium 500</p>
<p class="font-bold">Bold 700</p>

3️⃣ Special font matching (optimized Chinese and English mixed typesetting)

.en {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}
.cn {
  font-family: 'PingFang SC', 'Microsoft YaHei';
  font-weight: 400;
}

8. Performance and rendering considerations

Problem	Reason	Optimization method
Temporarily invisible text (FOIT)	Font loading blocks display	Use font-display: swap, accepting the later font change
Text is blurry/jittery	Some weights fallback	Use explicitly supported weights
Different browsers have different weights	Differences in rendering algorithms	Clearly declare font family and weight
Animation stuck	Font redraw	Reduce font weight animation or use variable font

9. Summary of frequently asked questions in interviews

font-weight accepts keywords or numbers from 1 to 1000. Hundreds from 100 to 900 are common named mappings; actual rendering depends on font support and fallback. The default is 400, bold corresponds to 700. Available weights depend on the font file, face and version. Missing weights follow font-weight matching rules, rather than always choosing the numerically closest weight. In modern projects, we will use box-sizing: border-box to control layout and font-weight: 400/500/700 to distinguish levels; Variable fonts can use finer values within their declared and supported range, such as font-weight: 537.

10. Summary of knowledge graph (structured)

font-weight
 ├── 类型
 │   ├── normal(400)
 │   ├── bold(700)
 │   ├── bolder/lighter（相对）
 │   └── 数值1-1000；100-900为常见命名映射
 ├── 字体支持范围
 │   ├── 部分字体仅支持400/700
 │   ├── 可变字体在其声明范围内插值
 ├── 继承规则
 │   ├── 可继承属性
 │   └── bolder/lighter按父级映射
 ├── 性能优化
 │   ├── font-display: swap
 │   └── 减少 weight 动画
 └── 实战
     ├── Tailwind font-*
     ├── 强调内容 bold/600
     └── 混排优化（中英字体分离）

11. Font matching algorithm

"Font Matching Algorithm" is a core mechanism when browsers render text. It determines: The font name you write in CSS, what font is actually displayed by the browser.

1. Why do we need a font matching algorithm?

In CSS you often write:

font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;

But not all user computers or systems have these fonts. 👉 So the browser needs to from left to right Find "fonts that can display this character" according to the rules, If it is not found, it will automatically replace (fallback) to other fonts.

This whole set of logic is font matching algorithm (font matching algorithm).

2. Execution steps of browser font matching algorithm

Take Chrome as an example (other browser mechanisms are similar) 👇

1️⃣ User specified font-family

The browser will start with a candidate list of font-family, such as:

font-family: 'Roboto', 'PingFang SC', 'Helvetica', sans-serif;

It will be searched in the following order from left to right.

2️⃣Font Family Matching

The browser looks in the system font table for:

• Does 'Roboto' exist?
• If present, does it contain the required characters (e.g. Chinese)?

If it is not found, or if it is found but the character is not supported, continue to the next one.

💡 A font file may not contain the entire character set. For example, if 'Roboto' has no Chinese characters, it will fallback to 'PingFang SC'.

3️⃣ Font style matching (Style Matching)

After determining the font family, the browser looks for the font style that best matches the current CSS properties:

Properties	Match direction
font-style	normal / italic / oblique
font-weight	1–1000; matched against available font weights
font-stretch	condensed / expanded
font-variant	small-caps etc.

The browser selects available faces using font matching and fallback rules, rather than simply choosing the numerically closest weight:

For example, you set font-weight: 500, but the font only provides 400 and 700, The browser will choose the one that is closer (usually 400).

4️⃣Character level matching (Glyph Fallback)

If the font supports some characters, such as English letters ✅, Chinese ❌, The browser will match "missing characters" character by character:

Each character is searched to find a font that can render that glyph.

This is why you often find "inconsistent font styles" when mixing English + Chinese. Because different characters come from different font files.

5️⃣ Finally fall back to Generic Families

If none of the above fonts are found, the browser uses the Universal Font Family:

Universal Family	Meaning
serif	Serif fonts (Arial, Times)
sans-serif	Sans serif font (Helvetica, Arial)
monospace	Monospace font (Courier)
cursive	cursive style
fantasy	decorative fonts
system-ui	System default UI font (such as SF Pro Text)

3. Simplified model summary (matching logic diagram)

font-family
 ├── 第 1 层：用户声明的字体族列表
 │     ├── 查找字体是否存在
 │     ├── 查找是否支持字符
 │     └── 若缺失则继续下一个
 ├── 第 2 层：字体样式匹配
 │     ├── 匹配 font-weight
 │     ├── 匹配 font-style
 │     └── 匹配 font-stretch
 ├── 第 3 层：逐字符匹配（Glyph fallback）
 └── 第 4 层：通用字体族 fallback（sans-serif 等）

4. Problems and Optimization in Practical Applications

Problem	Reason	Optimization Suggestions
Chinese fonts are not displayed uniformly	Fallback fonts are different	Clearly declare Chinese and English fonts, such as "PingFang SC", "Microsoft YaHei", Arial
English letters are thinner or offset than Chinese letters	Font weight differences	Set different font-family for Chinese and English
English font fallback to Song Dynasty	Missing English font declaration	Add English fonts such as "Helvetica", "Arial"
Page flickering (FOIT/FOUT)	Slow font loading	Use font-display: swap

5. Extension mechanism of modern browsers

✅ 1. Local Font priority

If the font name has the same name as the system built-in font (such as "Arial"), The browser will give priority to using the local version (local).

Loading strategies can be explicitly declared via @font-face:

@font-face {
  font-family: 'MyFont';
  src: local('Arial'), url('MyFont.woff2') format('woff2');
}

✅ 2. Font merging (Font Fallback Chain)

The browser will automatically maintain a fallback chain internally, such as:

'Roboto' → 'Noto Sans' → 'PingFang SC' → 'sans-serif'

Therefore, sometimes even if PingFang SC is not written, Chrome can still display Chinese normally.

✅ 3. Font caching and preloading

To prevent font flickering (FOIT), use:

font-display: swap;

Or preload fonts:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

6. Interview answer summary template

The browser's font matching algorithm starts from the font-family list declared by the developer. Searches in sequence for font files that exist on the system and support the current character. After the font is found, the closest style will be selected based on font-weight, font-style and other attributes; If the font does not support certain characters, a character-by-character fallback will be performed; Finally fall back to a universal font family (such as sans-serif). In actual projects, we will optimize rendering consistency through clear font chains, font-display, and Chinese and English groupings.