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

mwngjboj 于 2023-11-21 发布在 Vue.js

关注(0)|答案(2)|浏览(339)

在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";`
    }
  }
},

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

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类似的工作）？

vue.js

来源：https://stackoverflow.com/questions/70086712/load-local-fonts-in-vite-vue3-project

2条答案

按热度按时间

dwthyt8l1#

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

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

字符串
并在vite.config.js中设置别名：

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
  }
}

型

赞(0）回复(0）举报 2023-11-21

unguejic2#

我能够通过简单地将字体放在根目录下的公共文件夹中来实现这一点。
比如：

public/.**.ttf
src/

字符串

赞(0）回复(0）举报 2023-11-21

我来回答

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

2条答案

相关问题

热门标签

最新问答