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

会不会惊动山神2024-05-03 9:17

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