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/master/README-ZH-CN.md
使用教程:https://www.jianshu.com/p/8ef246692d14
上述方法弊端
font-spider原理是解析html页面中的含有中文字的标签,然后解析标签,将需要的ttf压缩,将压缩后的ttf文件放到项目中去,**但是,这种ttf文件会解析页面中已经存在的字体,而我们的项目是单页面应用,都是打包后的js文件,没有像静态页面中已存在的字体**,所以当我们把压缩好的ttf文件放到静态页面中尝试时,确实是有效的,可当我们放到项目中就失效了,这是我能想到能解释这个现象的唯一原因了。
所以怎么办?
方法3:
在万籁俱寂之时,为我无意间翻到了一个网站叫‘有字库“,网址是:https://www.webfont.com
具体使用方法
1、注册登录
2、检索到需要的字体
3、点击使用,下面照搬就行
这个在线字体库的唯一的优势就是它的js文件通过cdn加速过,加载字体文件的速度提高了,其他并没有什么特别之处。但是,为什么我后来又放弃了呢?当你搜一下下面的字体时突然发现
兄弟有钱不?
总结
如果你的产品跟你说:“去他妈的用户体验。”我强烈推荐方法1
如果你使用的前端项目不是基于node应用使用方法2,且你不想这么费事,那就方法3。
敲黑板
天真的你们是不是以为这就完了,还有方法4呢?我怎么可能不解决问题就结束了呢?史上最强的解决方案来啦。。。
我:"那个,口渴吗?"
她:“什么事?”
我:“这个图能帮我切一下吗?”
她:“行啊!”
我:“顺便把这个字体也放进去吧!”
她:“可以的,现在就要吗?”
我:“没事没事,你慢慢做,我不急”
...半个小时候,美团的小哥在楼梯间吼道:“徐先生,徐先生,您的奶茶到了!”
完结