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配置的资源路径

相关推荐
在下Z.2 小时前
前端基础--css(1)
前端·css
小帆聊前端3 小时前
CSS 选择器全解析:从基础语法到组件库样式修改,解决前端样式定位难题
css
某柚啊4 小时前
iOS移动端H5键盘弹出时页面布局异常和滚动解决方案
前端·javascript·css·ios·html5
昔人'5 小时前
使用css `focus-visible` 改善用户体验
前端·css·ux
街尾杂货店&1 天前
css word属性
前端·css
Demoncode_y2 天前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
CoderYanger2 天前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
软件技术NINI2 天前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI2 天前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
金梦人生2 天前
Css性能优化
前端·css