vue中引入字体资源遇到的问题

JavaScript 复制代码
@font-face {
	font-family: "Effra-Regular";
	src: url("~/assets/fonts/Effra-Regular.woff");
}

这种写法能加载字体,但是无法应用字体

JavaScript 复制代码
@font-face {
	font-family: "Effra-Regular";
	src: url("@/assets/fonts/Effra-Regular.woff");
}

这种写法会报错,甚至无法通过编译

JavaScript 复制代码
@font-face {
	font-family: "Effra-Regular";
	src: url("~@/assets/fonts/Effra-Regular.woff");
}

这种写法可以加载并应用字体

解释:

"~"是webpack中css-loader提供的导入资源语法

"@"是jsconfig.json/tsconfig.json配置的资源路径

相关推荐
呆呆的心6 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
AA-代码批发V哥7 小时前
CSS之布局详解指南
css
拾光拾趣录9 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
FogLetter9 小时前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
FogLetter9 小时前
前端性能优化:深入理解回流与重绘
前端·css
浪裡遊11 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
拾光拾趣录13 小时前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
Codebee13 小时前
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
css·人工智能·算法
zhanshuo13 小时前
i18next + 原生JS 双引擎:打造前端多语言系统最佳实践
前端·javascript·css
十盒半价13 小时前
前端性能优化避坑指南:从回流重绘到页面渲染全解析
前端·css·trae