Vue项目SCSS中无法导入@font-face自定义字体问题求助

1 初始在线引入的错误修正 #

最初写法错误原因是：@font-face的src属性需要指向实际的字体二进制文件（.ttf/.woff2/.woff等格式），你填写的是字体样式表地址，无法被识别为字体资源。
在线引入的正确写法有两种：

• 直接在全局样式文件中导入样式表，无需自行编写@font-face：

/* 写在fonts.scss顶部即可 */
@import url('字体服务提供的样式表地址');

• 更稳妥的方案是在项目入口html文件的<head>标签内添加字体引用链接，完全规避构建工具的样式解析问题。

2 本地字体文件引入的错误修正 #

使用本地下载的ttf/otf字体文件不生效，可按以下步骤排查修正：

• 补充format属性声明字体格式，帮助浏览器正确识别：

@font-face {
  font-family: 'Luckiest Guy';
  src: url('./LuckiestGuy-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

如果使用otf格式，format值对应为opentype。

• 确认字体文件的相对路径正确：如果fonts.scss和字体文件存放在同一目录，./LuckiestGuy-Regular.ttf路径有效；如果目录层级不同，需要调整路径指向正确的文件位置。可打开浏览器控制台的网络面板，查看字体文件是否请求成功，出现404则说明路径配置错误。
• 全局样式导入位置修正：不要在App.vue的带scoped属性的样式块中导入全局字体样式，建议将全局样式在项目入口js文件中直接导入，示例：

// main.js
import './assets/scss/main.scss'

3 最终验证 #

配置完成后打开浏览器元素审查面板，查看目标元素的font-family属性是否被正确应用，是否存在更高优先级的样式覆盖了字体配置。

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