九八云安全字体族选择与优先级
HTML5通过font-family属性设置字体族，优先使用用户设备已安装的字体,最后指定通用字体族作为回退方案。
body {
font-family: "Arial", "Helvetica", sans-serif;
}
| 优先级 | 字体名称 | 说明 |
|---|---|---|
| 1 | “Arial” | 首选字体（需用户设备安装） |
| 2 | “Helvetica” | 次选字体（macOS系统常见） |
| 3 | sans-serif | 通用字体族（最后保障） |
字体大小与单位
- 绝对单位：
px（像素），如font-size: 16px，固定尺寸,不受父元素影响。 - 相对单位：
em：相对于父元素字体大小（如5em表示父元素的1.5倍）。rem：相对于根元素（<html>）的字体大小（如1rem=html的font-size）。
- 推荐实践：使用
rem实现全局统一的响应式设计。
颜色设置方式
| 方法 | 示例 | 适用场景 |
|---|---|---|
| 十六进制 | color: #333; |
精确配色 |
| RGB/RGBA | color: rgba(51,51,51,0.8); |
透明度控制 |
| HSL/HSLA | color: hsla(0,0%,33%,0.7); |
色相调整更直观 |
文本样式控制
- 粗细：
font-weight（数值400=正常，70=加粗）。 - 斜体：
font-style: italic;或font-style: normal;。 - 行高：
line-height: 1.6;（推荐用无单位数值，基于当前字体大小）。
语义化标签默认样式
| 默认字体大小 | 默认粗细 | 用途 | |
|---|---|---|---|
<h1> |
2em | 700 | |
<h2> |
5em | 700 | |
<p> |
1em | 400 | 正文段落 |
<button> |
1em | 400 | 交互按钮 |
相关问题与解答
问题1：如何确保中文网站在不同设备上的字体兼容性？
解答：
body {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
问题2：为什么推荐使用rem而非px设置字体大小？
解答：
rem基于根元素字体大小，可统一调整全局比例（如用户偏好设置或响应式布局）；px为固定值，在复杂嵌套结构中可能导致计算混乱；- 示例：若
html的font-size: 16px，则1rem = 16px，5rem = 24px
