【达人必备】抄完几十家大厂的“家”，我习得7招优化阅读体验的秘籍

重要的话先抛：

• 优雅的排版如同耐看的美人，一颦一笑都拨动着你的心弦。
• 慎用自定义字体，而不是完全摒弃。颜值和实用性，并不是两极分化的，掌握住平衡就好。记住，除了你自己，没人能限制你成为天才。
  ……

☞【本文目前的技巧】

1. 自带输出属性的对比色；×
2. 辨识度高明的字体大小；×
3. 稳妥的纯数字行高设置；√
4. 舒适度拉满的单行长度；×
5. 科学而优雅地选择字体；×
6. 网页字体加载的助力项；×
7. 如何合理应用纵向分布。×

---

最近，在开发个人博客网站的过程中，本以为简简单单的修改字体，却是一波三折，遇到了不少的问题。于是乎，跑去深入研究了一下 CSS 字体的 font-family 属性设置，顿觉一阵头大。

字体的学问真不少啊！在发出这样感叹的同时，也对网上现有的相关资料的零散杂乱和繁复费解颇有体会（鉴于笔者现有的搜商，并无抨击的味道）。

这便是写下此文章的初衷：一是对开发过程中产生问题的一项个人笔记，可以促进自学途中的独立思考；二是希望这系列文章能够对正在阅读中的你和今后开发路上的我都有些许帮助。少走弯路，没有内卷。

---

0. 字体属性的基础用法

这部分介绍了如何定义字体的系列、大小、粗细、行高和文字样式等。此部分基本是学习笔记，有一定基础的读者可选择性阅读，笔记主要出处有：“黑马程序员pink老师前端入门教程” 、“MDN 基本文本和字体样式” 。

---

0.1 font-style 文字样式

【基本语法】（★★☆☆☆）

font-style : normal | italic | oblique;

【语法取值】

normal：默认值，即正常的字体
italic：斜体。对于没有斜体变量的特殊字体，将应用 oblique
oblique：倾斜的字体

【注意事项】

• 很少给文字加斜体，反而要给斜体标签 em，i 改为不倾斜的字体。
• 对应的脚本特性为 fontStyle。

0.2 font-weight 文字粗细

【基本语法】（★★★☆☆）

font-weight : normal | bold | bolder | lighter;
font-weight : 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;

【语法取值】

normal：默认值。正常的字体，相当于 400
bold：粗体。相当于 700，也相当于 b 标签的作用
bolder：比 normal 粗
lighter：比 normal 细
100~900：数字越大，字越粗

【注意事项】

• 实际开发时，我们更喜欢用数字表示粗细，注意数字后面不跟单位。
• 对应的脚本特性为 fontWeight。

0.3 font-size 文字大小

【基本语法】（★★★☆☆）

font-size : xx-small | x-small | small;
font-size : medium;
font-size : large | x-large | xx-large;
font-size : larger | smaller | length;

【语法取值】

xx-small | x-small | small：
绝对字体尺寸。根据对象字体进行调整。依次是：最小、较小、小
medium：默认值。绝对字体尺寸。根据对象字体进行调整。正常大小
large | x-large | xx-large：
绝对字体尺寸。根据对象字体进行调整。依次是：大、较大、最大
larger | smaller：
相对字体尺寸。相对于父对像中字体尺寸进行相对增大或减小。使用成比例的 em 单位计算
length：相对字体尺寸。百分数 | 由浮点数字和单位标识符组成的长度值，不可为负值。

【注意事项】

• 像素（px）是我们网页最常用的单位，