当前位置：首页 > 前端开发 > 正文

如何在HTML中引入字体文件？

admin
前端开发
2025-06-11
5

在HTML中引入字体文件，通常使用CSS的 @font-face规则，通过 src属性链接字体文件（如.woff/.ttf格式），定义字体名称，然后在选择器中通过 font-family调用该字体。

在网页设计中，引入自定义字体能显著提升品牌识别度和视觉体验，以下是符合现代Web标准的字体引入方法,兼顾性能与兼容性：

核心方法：使用 @font-face 规则

@font-face { font-family: 'MyCustomFont'; /* 自定义字体名称 */ src: url('fonts/MyFont.woff2') format('woff2'), /* 优先加载 */ url('fonts/MyFont.woff') format('woff'); /* 兼容备选 */ font-weight: 400; /* 字重 */ font-style: normal; /* 样式 */ font-display: swap; /* 避免布局偏移 */ }

关键参数说明：

如何在HTML中引入字体文件？第1张

src：按优先级排列字体文件（推荐WOFF2格式，体积比TTF小50%）
font-display: swap：文本先用系统字体渲染，自定义字体加载后替换
字重匹配：不同粗细需单独声明（如300/400/700）

HTML中调用自定义字体

body { font-family: 'MyCustomFont', Arial, sans-serif; /* 降级方案 */ } h1 { font-family: 'MyCustomFont', Georgia, serif; font-weight: 700; /* 需与@font-face定义的权重一致 */ }

性能优化技巧

子集化字体
通过Font Squirrel工具移除未用字符，中文字体可缩减90%体积
预加载关键字体
在HTML头部添加：

<link rel="preload" href="fonts/MyFont.woff2" as="font" type="font/woff2" crossorigin>
CDN加速
使用第三方托管（推荐）：
src: url('https://cdn.example.com/fonts/MyFont.woff2');

第三方字体服务（推荐方案）

Google Fonts 示例：

如何在HTML中引入字体文件？第3张

<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">  body { font-family: 'Roboto', sans-serif; }

优势：自动提供CDN、浏览器缓存、字体子集和WOFF2格式

兼容性解决方案

@font-face { font-family: 'LegacyFont'; src: url('fonts/LegacyFont.eot'); /* IE9兼容模式 */ src: url('fonts/LegacyFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/LegacyFont.woff2') format('woff2'), url('fonts/LegacyFont.ttf') format('truetype'); }