CSS通过font-family、font-size、font-weight、font-style、font简写、font-feature-settings及@font-face七种方式精确控制HTML5文本外观，覆盖字体选择、尺寸、粗细、风格、高级排版与自定义加载。
如果您希望在HTML5页面中精确控制文本的外观，CSS提供了多种字体属性来实现这一目标。以下是全面控制字体样式的具体方法：
一、设置字体族（font-family）
font-family 属性用于指定文本使用的字体列表，浏览器将按顺序尝试加载第一个可用字体，确保文本始终以预期样式显示。
1、在CSS规则中声明 font-family 属性，值为逗号分隔的字体名称列表。
2、优先使用通用字体族（如 serif、sans-serif、monospace）作为备选，放置在列表末尾。
立即学习“前端免费学习笔记（深入）”；
3、若字体名称含空格（如 "Times New Roman"），必须用英文双引号包裹。
4、示例写法：font-family: "Helvetica Neue", Arial, sans-serif;
二、调整字体大小（font-size）
font-size 属性定义文字的尺寸，支持多种单位，不同单位适用于不同响应需求，直接影响可读性与布局流。
1、使用像素（px）设定固定大小，例如 font-size: 16px;
2、使用相对单位 em，基于父元素字体大小计算，例如 font-size: 1.2em;
3、使用 rem 单位，相对于根元素（html）字体大小，例如 font-size: 1.125rem;
4、使用视口单位 vw/vh 实现随屏幕宽度缩放，例如 font-size: 4vw;
三、控制字体粗细（font-weight）
font-weight 属性决定字符笔画的粗细程度，影响视觉层级和强调效果，支持数值与关键字两种指定方式。
1、使用数值 100–900（以100为步长），其中 400 等价于 normal，700 等价于 bold。
2、常用关键字包括 normal、bold、lighter、bolder。
3、部分自定义字体支持更多字重（如 500、600），需确认字体文件是否包含对应字重数据。
4、示例写法：font-weight: 600;
四、设置字体风格（font-style）
font-style 属性用于启用斜体或倾斜效果，主要影响文本的语义表达与视觉区分度。
1、normal 表示正常直立字体，禁用斜体效果。
2、italic 启用字体内置的斜体字形（如有），优先于 oblique。
3、oblique 表示浏览器对常规字体进行几何倾斜处理，无对应斜体字形时回退使用。
4、示例写法：font-style: italic;
五、组合字体属性（font）简写
font 属性允许在一个声明中同时设置 font-style、font-weight、font-size、line-height 和 font-family，提高CSS简洁性，但要求严格书写顺序。
1、语法格式为：font: [font-style] [font-weight] font-size [/line-height] font-family;
2、font-size 和 font-family 为必填项，其余为可选；省略项将重置为初始值。
3、line-height 必须紧跟 font-size 后并用斜杠分隔，不可单独出现。
4、示例写法：font: italic bold 1.25rem/1.4 "Segoe UI", sans-serif;
六、启用字体特性（font-feature-settings）
font-feature-settings 属性用于手动开启OpenType字体中的高级排版功能，如连字、小型大写字母、数字变体等，提升专业文本表现力。
1、使用字符串键值对形式，如 "liga" 1 启用标准连字。
2、常见特性标签包括 "liga"（连字）、"smcp"（小型大写）、"tnum"（表格数字）、"frac"（分数）。
3、多个特性用逗号分隔，例如 font-feature-settings: "liga", "smcp" 1, "tnum";
4、建议配合 @font-face 加载支持OpenType特性的Web字体使用。
七、定义自定义字体（@font-face）
@font-face 规则允许网页加载并使用未安装在用户系统中的字体文件，是实现品牌字体一致性的核心手段。
1、在CSS中使用 @font-face 声明字体族名与资源路径。
2、src 属性指定字体文件URL，支持多种格式（woff2、woff、ttf），推荐优先提供 woff2。
3、font-weight 和 font-style 需准确匹配字体文件实际字重与风格，避免浏览器模拟。
4、示例写法：@font-face { font-family: "MyBrandFont"; src: url("fonts/myfont.woff2") format("woff2"); font-weight: 500; font-style: normal; }
