h5引用项目里css_H5（nuxt）项目引入字体

H5(nuxt)项目引入字体

闲话少说

方法1：

1.下载所需要的字体，.ttf格式本文以(FZCYJ.ttf 为例)

2.先自己定义一个font.css文件，字体文件的路径引入

@font-face {

font-family: "华文行楷";

src: url('stxingka.ttf');

font-weight: normal;

font-style: normal;

}

3.App.vue中的style里引入

4、添加loader

module: {

rules: [

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

}

}

]

}

5.使用

上述方法弊端：

ttf文件教大，页面加载过慢，影响用户体验

解决方向：压缩ttf文件

方法2： font-spider(字蛛)压缩ttf

先附上官方链接：http://font-spider.org/

GITHUB：https://github.com/aui/font-spider/blob/m