html5怎么引入字体_HTML5用@font-face引入本地或网络字体文件【引入】

需用CSS的@font-face规则加载自定义字体，步骤包括：准备WOFF2/WOFF/TTF多格式文件并存放至项目目录；在CSS中为每种字重和样式单独声明@font-face；通过font-family应用字体；可选Google Fonts外链方式；添加font-display: swap缓解FOIT/FOUT问题。

如果您希望在HTML5页面中使用自定义字体，但浏览器默认不支持该字体，则需要通过CSS的@font-face规则手动加载字体文件。以下是引入本地或网络字体的具体操作步骤：

一、准备字体文件并确认格式兼容性

@font-face支持多种字体格式，不同浏览器对格式的支持存在差异，需提供至少WOFF2（现代浏览器首选）、WOFF（广泛兼容）和TTF/OTF（备用）三种格式以确保跨浏览器可用性。字体文件应存放在项目目录中可被CSS路径访问的位置，或托管于支持CORS策略的CDN服务器上。

1、下载所需字体的多种格式文件（如font.woff2、font.woff、font.ttf）。

2、将字体文件放入项目assets/fonts/目录下（例如：./assets/fonts/MyFont.woff2）。

立即学习“前端免费学习笔记（深入）”；

3、检查目标字体是否包含所需字重（400、700）与字形样式（normal、italic），并在后续@font-face声明中准确对应。

二、在CSS中使用@font-face声明字体

通过@font-face规则定义字体族名称与源文件路径，使font-family属性可在后续样式中调用。必须为每个字重和样式组合单独声明一个@font-face块，避免浏览器回退失败。

1、在CSS文件（如style.css）顶部或

2、@font-face { font-family: 'MyCustomFont'; src: url('./assets/fonts/MyFont.woff2') format('woff2'), url('./assets/fonts/MyFont.woff') format('woff'), url('./assets/fonts/MyFont.ttf') format('truetype'); font-weight: 400; font-style: normal; }

3、如需支持粗体，另写一个声明块，其中font-weight设为700，src指向对应粗体文件。

三、在HTML中应用自定义字体

声明完成后，可通过CSS的font-family属性将自定义字体应用到任意HTML元素。浏览器会按声明顺序尝试加载各格式，优先使用最高效且支持的格式。

1、在CSS中为目标选择器设置font-family值，例如：body { font-family: 'MyCustomFont', sans-serif; }

标签： html5 css html android go 编码 浏览器 microsoft cdn 跨域 google htm