css 颜色与字体

css 中颜色表示方式有：十六进制（#000）、rgb(rgb(0,0,0))及hls（hls(198,73%,53%)）函数等。HSL是一种更适合人类读取的颜色表示法。

网页设计，成也字体，败也字体。Web字体使用@font-face规则，告诉浏览器去哪里找到并下载自定义字体，供页面使用。

1 颜色表示法

rgb() 函数有三个值，分别描述红（red）、绿(green)、蓝(blue)彩色值，每个值使用十进制而非十六进制，范围为0-255（取代了00-FF）。例如rgb(20,130,220),从这个值可以看出，这个颜色红色值非常少，绿色值中等，蓝色值非常多。这个颜色整体偏蓝。

图 rgb(20,130,220) 表示的颜色

十六进制表示法,通常由“#”及6位数字（或字母）构成。分别代表红、绿、蓝三个颜色通道，每个通道占2位，取值范围是（00-FF）。

短格式的十六进制表示法，由“#”及3位数字（或字母）构成。规则是为将每一位重复一次。例如：

#000 -> #000000;

#abc -> #aabbcc;

1.1 HSL 表示法

HSL代表色相（Hue）、饱和度(Saturation)和亮度(Lightness)。

色相是色彩的基本属性，值颜色在色轮上的位置，用0-360度的数值表示。

图 色相环

红(0)、橙(30)、黄(60)、绿(120)、青(180)、蓝(240)、紫(270)。

基色、15°同类色、30°类似色、60°临近色、90°中差色、120°对比色、180°互补色。

饱和度：描述颜色的鲜艳程度或纯度，以百分比的形式表示。饱和度为100%时，颜色是最鲜艳的，为0%时，颜色变成灰色。（减少灰色的比例）

图 不同饱和度颜色对比

亮度：表示颜色的明亮程度，亮度为0%时，颜色为黑色；为100%时，颜色为白色。（加入白色的比例）

图 不同亮度颜色对比

2 字体

在CSS中使用Web字体（非系统默认字体）可以通过@font-face自定义引入。

@font-face {
  font-family: "MyFont"; /* 自定义字体名称 */
  src: 
    url("path/to/font.woff2") format("woff2"), /* 优先加载 woff2（更小更高效） */
    url("path/to/font.woff") format("woff");    /* 兼容旧浏览器 */
  font-weight: 400;       /* 字重（如 400=normal, 700=bold） */
  font-style: normal;     /* 样式（normal/italic） */
  font-display: swap;     /* 优化加载行为 */
}
body {
  font-family: "MyFont", sans-serif; /* 使用自定义字体 */}
}

CSS 定义了5种通用字体族，通常将它们放在字体列表的最后作为回退，确保即使前面的字体都失败，也能显示一个可读的字体（从系统种挑选设定的字体族中的默认的一个字体）。

表 CSS的5中通用字体族

图 腾讯网（qq.com）首页中设置的字体

腾讯网设置的字体表示当sans-serif前面的字体都加载失败时，会选用用户当前系统中sans-serif字体族中的一个默认字体。

system-ui 表示操作系统默认UI字体。

2.1 FOUT和FOIT

FOUT: Flash of Unstyled Text，无样式文本闪动。渲染网页时，为了尽快渲染页面，浏览器使用了可用的系统字体。然后，当Web字体加载完成后，页面会使用Web字体重新渲染一次。相比系统字体，Web字体很可能会在屏幕上占用不一样的空间。这样导致在第二次渲染时，页面布局变了，文字突然跳动。

FOIT:Flash of Invisible Text。不可见文本闪动。有些浏览器没有采用上面的方式渲染文本，而是先渲染页面上除了文本以外的其他元素，把文本渲染成不可见，当Web字体加载完成后，再渲染文本。

这种方式还有个问题，当Web字体加载失败后，那么文本就一直不可见。