关于在vue项目中引入ttf格式的字体文件,基本工作:
下载下来字体文件,新建一个font文件夹,把字体文件放进去,在新建一个font.css文件(可以不用新建,直接在主css文件里写),把字体文件@font-face引入进css里。
注:@font-face也可以直接在scss文件里写或引入,不一定要在css文件里。
前面工作做完后,运行报错O(∩_∩)O
网上查了好半天,普遍都说是配置文件webpack.config.js中没有配置解析字体的模块。
用到的方法就是在build -> webpack.config.js中module:{ rules:{}}里添加解析模块及规则:
这种:
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'url-loader'
}
还有这种:
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
一通操作后还是没有解决问题,包括用下面的命令安装解析模块后还是报错。
npm install url-loader
自己后来尝试出来的方法,把字体文件放在了static目录下,解决了(前面是吧字体文件放在src目录下),不知道什么缘由。
下面用一张截图看明白:
说明:
因为我同时有两个vue项目,经测试,上面这样把字体文件放在static目录下,不需要再webpack.config.js文件里添加解析规则,因为我另一个项目直接把字体文件复制到对应目录,像最后这张图这样设,根本没有添加解析规则。