在 vite vue3 项目中加载本地字体

Posted 2023-02-22

【中文标题】在 vite vue3 项目中加载本地字体

【英文标题】：Load local fonts in vite vue3 project

【发布时间】：2022-01-02 06:57:19

【问题描述】：

在 main.scss 中，我从 assets/styles/fonts 文件夹加载本地字体：

@font-face 
  font-family: 'Opensans-Bold';
  font-style: normal;
  src: local('Opensans-Bold'), url(./fonts/OpenSans-Bold.ttf) format('truetype');

@font-face 
  font-family: 'Opensans-Light';
  font-style: normal;
  src: local('Opensans-Light'), url(./fonts/OpenSans-Light.ttf) format('truetype');

然后在 vite.config 中加载 main.scss：

css: 
  preprocessorOptions: 
    scss: 
      additionalData: `@import "@/assets/styles/main.scss";`
    
  
,

但是 main.scss 中的所有 css 都被应用除了字体，我得到错误：

downloadable font: download failed (font-family: "Opensans-Bold" style:normal weight:400 stretch:100 src index:1): status=2152398850 source: http://localhost:3000/fonts/OpenSans-Bold.ttf

我是在正确的轨道上还是我需要一些其他方法（与 Vue-CLI 类似的工作）？

【问题讨论】：

我也有同样的问题。路径似乎与它无关。在这两种情况下 - @/assets、../assets - 当我刷新页面时，字体不会随机加载。但在生产中，一切似乎都很好。我认为这个问题与 Vite 开发服务器有关。

【参考方案1】：

这是正确的方法，解决方案是相对路径：

src: local('Opensans-Bold'), url(@/assets/styles/fonts/OpenSans-Bold.ttf) format('truetype');