引入字体包

最新推荐文章于 2024-01-02 16:43:17 发布

敏小静

最新推荐文章于 2024-01-02 16:43:17 发布

阅读量906

点赞数

文章标签： vue js ttf

本文链接：https://blog.csdn.net/qq_31392495/article/details/116211843

版权

本文介绍了如何在Vue项目中引入和压缩苹方字体。首先，从设计师那里获取ttf文件，在scss中定义@font-face并引用，然后在vue.config.js中配置url-loader。为了解决大字体包导致的加载问题，推荐使用font-spider进行字体压缩，它会根据实际使用的字符剔除不必要的字形，从而减小字体包的大小。压缩步骤包括安装font-spider和运行压缩命令。

摘要由CSDN通过智能技术生成

我接触的设计师都比较喜欢用苹方字体，然后每次都要引入字体包。
首先一定要设计师给ttf格式的文件，然后在scss中引入

@font-face{
	font-family:'PingFangSC-Regular';
	font-weight:normal;
	src:url('@/assets/font/PingFangSC-Regular.tff')
 	}
 	.ping{
 	font-family:'PingFangSC-Regular';
 	}
 	页面使用<p class="ping">我是苹方字体</p>

vue.config.js的配置

const path = require('path')
const utils = {
  assetsPath: (_path) => {
    const assetsSubDirectory = process.env.NODE_ENV === 'production'
      // 生产环境下的 static 路径
      ? 'static'
      // 开发环境下的 static 路径
      : 'static'

    return path.posix.join(assetsSubDirectory, _path)
  },
  resolve: (dir) => {
    return path.join(__dirname, '..', dir)
  }
}


module.exports = {
 chainWebpack: (config) => {
    config.module.rule()
      .test(/\.(woff2?|eot|ttf|otf)(\?.*)$/i)
      .use('url-loader')
      .loader('url-loader')
      .options({
        name: utils.assetsPath('font/[name].[hash:7].[ext]'),
        limit: 10000
      })
  },
}

做完以上步骤就可以看到苹方字体了，但是往往字体包都很大，一个字体包几千兆，直接拉跨你的项目，所以我们还是要做一下压缩的。这里比较推荐的是font-spider进行压缩，它的原理是把不用的字体剔除，也就是说，假设你的苹方文字只有“我是苹方”这四个字，然后进行了压缩了，压缩包里面就只有这四个字才会生效，这样子的话，用的字越多，包就越大。

压缩的步骤：
1、cnpm install font-spider -g
2、 font-spider --debug ./index.html （后面跟的是index.html的相对路径）
生成最终的压缩文件，也可以放在cdn上加快加载速度。
在这里插入图片描述