在vite vue3项目中加载本地字体
在vite vue3项目中加载本地字体
提问于 2021-11-23 19:24:32
在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类似的工作)？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-11-23 21:21:00
这是正确的方法，解决办法是相对路径，所以：
src: local('Opensans-Bold'), url(@/assets/styles/fonts/OpenSans-Bold.ttf) format('truetype');并在vite.config.js中设置别名：
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
}
}Stack Overflow用户
发布于 2022-06-13 00:00:36
我只需简单地将字体放在根目录上的公用文件夹中就可以完成这项工作。
像这样：
public/.**.ttf
src/页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70086712
复制相关文章
相似问题
腾讯云开发者
