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

相关推荐
小白白一枚11111 小时前
css实现div被图片撑开
前端·css
@蒙面大虾11 小时前
CSS综合练习——懒羊羊网页设计
前端·css
顾菁寒12 小时前
WEB第二次作业
前端·css·html
前端Hardy16 小时前
HTML&CSS:爱上班的猫咪
前端·javascript·css·vue.js·html
聚宝盆_19 小时前
【css flex 多行均分有间隙布局】
前端·css
零希19 小时前
CSS元素类型(二)
前端·javascript·css
煎饼果子呀19 小时前
css-flex布局属性
开发语言·前端·css·html5
沈阳-施立20 小时前
CSS例子: 胶囊按钮
前端·css
前端Hardy20 小时前
超萌!HTML&CSS:打造趣味动画卡通 dog
前端·css·html·css3
Komorebi⁼20 小时前
JavaScript的对象事件监听处理,交互式网页的关键!
开发语言·前端·javascript·css·html