CSS集成：CSS字体属性详解 - font-family、font-size、font-weight完全指南

/* 指定多个字体作为回退方案 */
font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;

/* 使用通用字体族名 */
font-family: serif;          /* 衬线 */
font-family: sans-serif;     /* 无衬线 */
font-family: monospace;      /* 等宽 */
font-family: cursive;        /* 手写 */
font-family: fantasy;        /* 装饰 */

/* 系统字体栈 */
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

/* 绝对单位 */
font-size: 16px;      /* 像素 */
font-size: 12pt;      /* 点 */

/* 相对单位 */
font-size: 1.2em;     /* 相对于父元素字号 */
font-size: 1.2rem;    /* 相对于根元素字号 */
font-size: 120%;      /* 相对于父元素字号 */

/* 关键字 */
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;

/* 视口单位 */
font-size: 2vw;       /* 视口宽度的2% */
font-size: 1.5vh;     /* 视口高度的1.5% */

/* 计算值 */
font-size: clamp(14px, 1.5vw, 20px);  /* 响应式字号 */
font-size: calc(14px + 0.5vw);         /* 计算字号 */

/* 关键字 */
font-weight: normal;    /* 400 */
font-weight: bold;      /* 700 */
font-weight: lighter;   /* 相对更细 */
font-weight: bolder;    /* 相对更粗 */

/* 数值（100-900，步长100） */
font-weight: 100;  /* Thin */
font-weight: 200;  /* Extra Light */
font-weight: 300;  /* Light */
font-weight: 400;  /* Normal */
font-weight: 500;  /* Medium */
font-weight: 600;  /* Semi Bold */
font-weight: 700;  /* Bold */
font-weight: 800;  /* Extra Bold */
font-weight: 900;  /* Black */

font-style: normal;   /* 正常 */
font-style: italic;   /* 斜体（使用字体文件的斜体版本） */
font-style: oblique;  /* 倾斜（浏览器模拟倾斜） */

/* 完整简写：style variant weight size/line-height family */
font: italic small-caps bold 16px/1.5 'Microsoft YaHei', sans-serif;

/* 常用简写 */
font: bold 24px/1.4 'Microsoft YaHei', sans-serif;
font: 16px/1.6 sans-serif;

/* 注意：size和family是必需的，其他可省略 */

@font-face {
    font-family: 'CustomFont';
    src: url('custom-font.woff2') format('woff2'),
         url('custom-font.woff') format('woff'),
         url('custom-font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;  /* 字体加载策略 */
}

/* 使用自定义字体 */
body {
    font-family: 'CustomFont', sans-serif;
}

/* ❌ 不推荐：没有回退字体 */
h1 { font-family: 'Noto Sans SC'; }

/* ❌ 不推荐：使用px设置所有字号 */
p { font-size: 16px; }
h1 { font-size: 32px; }

/* ❌ 不推荐：加载过多字重 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;200;300;400;500;600;700;800;900');

/* ✅ 推荐：完整的字体栈 */
h1 { font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif; }

/* ✅ 推荐：使用CSS变量管理字号 */
:root {
    --text-base: 1rem;    /* 16px */
    --text-lg: 1.125rem;  /* 18px */
    --text-xl: 1.25rem;   /* 20px */
}

/* ✅ 推荐：只加载需要的字重 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');