html字体导入路径

@font-face 导入字体

基本语法

通过 @font-face 规则定义自定义字体，需声明字体名称、来源及格式。

@font-face {
  font-family: 'CustomFont'; / 自定义字体名称 /
  src: url('fonts/CustomFont.woff2') format('woff2'), / 优先使用woff2格式 /
       url('fonts/CustomFont.woff') format('woff'); / 兼容旧浏览器 /
  font-weight: normal;
  font-style: normal;
}

使用自定义字体

在CSS中通过 font-family 调用自定义字体：

body {
  font-family: 'CustomFont', Arial, sans-serif;
}

注意事项

Google Fonts 导入

直接嵌入链接

通过Google Fonts提供的CSS链接直接引用：

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

在CSS中调用

body {
  font-family: 'Roboto', sans-serif;
}

参数说明

第三方字体库（如Adobe Fonts）

引入方式

通过 <link> 或 @import 加载库文件：

<link rel="stylesheet" href="https://use.typekit.net/xxx.css">

激活字体

在CSS中声明：

body {
  font-family: 'Adobe-Font', sans-serif;
}

字体文件格式与路径

常见字体格式

路径规则

• 相对路径：相对于CSS文件位置（若CSS在外部）或HTML文件位置（若CSS在内部）。

  src: url('../fonts/myfont.woff2'); / CSS文件在fonts目录的子目录 /

• 绝对路径：从域名根目录开始（不推荐，因部署环境变化易失效）。

常见问题与解答

问题1：如何测试字体是否成功加载？

解答：

1. 打开浏览器开发者工具（F12），检查 Network 标签页是否成功加载字体文件。
2. 在 Elements 或 Computed 面板中确认 font-family 值是否生效。
3. 临时修改字体颜色或样式,观察页面是否变化。

问题2：@font-face 引入的字体在IE下显示异常怎么办？

解答：

1. 确保提供多种格式（如 .eot + .woff），IE优先加载 .eot。
2. 检查 src 路径是否使用绝对路径或协议（如 //cdn.example.com）。
3. 添加 `font-variant: normal;