html的字体

%ignore_a_3%字体基础

HTML本身不直接定义字体样式，主要通过CSS控制字体相关属性,以下是核心知识点：

字体类型与样式

字体族与优先级规则

1. 字体族分类：

   

   • 衬线字体（Times New Roman）
   • 无衬线字体（Arial）
   • 等宽字体（Courier New）
   • 手写体（Comic Sans MS）

2. 优先级规则：

   font-family: "Arial Black", Gadget, sans-serif;

   • 优先使用引号内的精确匹配字体
   • 逗号分隔备选字体
   • 最后指定通用字体族（如serif/sans-serif）

Web安全字体

特殊字体处理

1. 自定义字体：

   @font-face {
     font-family: 'CustomFont';
     src: url('font.woff2') format('woff2');
   }
   body { font-family: 'CustomFont', sans-serif; }

2. 字体加载优化：

   • 使用font-display: swap提升渲染性能
   • 优先使用woff2格式（体积最小）

响应式字体设计

相关问题与解答

Q1：为什么推荐使用Web安全字体？
A：早期浏览器对字体支持不一致，Web安全字体可确保跨平台显示统一，现代方案建议：

1. 优先使用系统自带字体（如Arial/Helvetica）
2. 配合@font-face加载自定义字体
3. 使用Google Fonts等托管服务

Q2：如何在网页中同时设置多种字体备选？
A：通过逗号分隔字体族，并按优先级排列：

font-family: 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

• 首个字体为首选（需用户设备已安装）
• 中间为系统默认字体
• 最后为通用字体族兜