CSS使用@font-face导入本地字体文件无效问题咨询

首先排查语法错误 #

你给出的@font-face代码缺少闭合的}，浏览器无法正常解析这段样式，是加载失败的首要原因，修正后代码如下：

@font-face{
font-family: Avenir;
src: url("Avenir.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}

如果修正后仍然无法加载，可依次排查以下问题：

• 路径匹配问题：路径大小写在Linux等服务器环境下是敏感的，需确认文件名、路径的大小写和实际存储完全一致；注意相对路径是相对于你写这段样式的CSS文件的位置，而不是HTML文件位置，如果CSS存放在站点根目录下的css文件夹中，要调用根目录fonts文件夹的字体，路径需要写为../fonts/Avenir.ttf。
• 服务器MIME配置：部分服务器默认未配置.ttf格式的MIME类型，会阻止字体文件加载，需在服务端配置中添加.ttf后缀对应的font/ttf MIME类型规则。
• 字体调用规则匹配：你当前定义的是常规字重、常规样式的Avenir字体，如果你在页面样式中写了font-weight: bold、font-style: italic来调用Avenir，浏览器不会匹配到你声明的这个字体规则，要么补充对应字重、样式的@font-face声明，要么调用时使用和声明一致的字重、样式参数。
• 字体文件本身问题：部分Avenir字体文件自带版权保护限制，无法直接嵌入网页使用，可换用其他无嵌入限制的TTF字体测试，确认是否是字体文件本身的问题。
• 跨域限制问题：本地直接打开HTML文件测试时，浏览器的本地文件协议跨域规则会阻止本地字体加载，建议用本地开发服务启动站点测试；如果字体部署在其他子域名下，需要配置CORS规则允许字体跨域加载。

内容的提问来源于stack exchange，提问作者VinchinzoB