当前位置：首页 > 行业动态 > 正文

html加入特殊字体

admin
行业动态
2025-05-14
1

在HTML中引入特殊字体可通过@font-face或链接Google Fonts，定义后用

使用@font-face引入自定义字体

通过CSS的@font-face规则可加载服务器上的字体文件,实现个性化字体嵌入。

@font-face {
  font-family: 'CustomFont';
  src: url('fonts/CustomFont.woff2') format('woff2'),
       url('fonts/CustomFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'CustomFont', sans-serif;
}

参数	说明
font-family	自定义字体名称
src	字体文件路径（需多种格式）
font-weight	字重（normal/bold等）
font-style	样式（normal/italic等）

注意事项：

需提供多种浏览器兼容格式（.woff/.woff2/.ttf）
字体文件不宜过大（建议单个<100KB）
英文字体需声明UNICODE范围（如unicode-range: U+0000-00FF）

通过Google Fonts引入网络字体

Google Fonts提供上千种开源字体,通过链接方式快速调用。

html加入特殊字体第1张

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

参数	说明
family	字体名称（多个用
wght	字重（400=normal，70=bold）
display	加载策略（swap/fallback等）

优势：

无需托管字体文件
自动生成跨域配置
提供拉丁/西里尔/希腊等多语种支持

使用系统自带特殊字体

通过CSS的font-family基因调用操作系统内置字体。

.tech-font {
  font-family: 'Courier New', monospace; / 等宽字体 /
}
.design-font {
  font-family: 'Impact', Haettenschweiler, 'Arial Narrow Bold'; / 海报字体 /
}

场景	推荐字体组合
代码环境	`'Courier New', monospace`
手写效果	`'Brush Script', cursive`

特殊符号与图标字体

通过字体库实现图标和特殊符号的矢量渲染。

<!-引入Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-使用图标 -->
<i class="fas fa-camera"></i>
<i class="fab fa-github"></i>

类型	说明
Font Awesome	提供5000+矢量图标
Material Icons	Google官方图标库
Simplify Icons	轻量级开源图标集

使用技巧：

通过<i>标签或span配合class使用
可调整颜色、大小等CSS属性
支持SVG/JSX等现代前端框架集成

字体加载优化策略

技术方案	作用
preconnect	提前建立与字体服务器的连接
preload	提示浏览器预加载关键字体资源
font-display	控制字体加载策略（swap/fallback）

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" as="style">