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

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

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

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

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

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

解释：
"~"是webpack中css-loader提供的导入资源语法
"@"是jsconfig.json/tsconfig.json配置的资源路径