如何在vue项目生产中缓存ttf文件并使用font-face

在Vue项目中缓存ttf文件并使用@font-face，可以按照以下步骤进行操作：

将ttf文件放置在项目的assets目录中，例如：/src/assets/fonts/
在项目的vue.config.js文件中添加以下代码：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('fonts')
      .test(/\.(ttf|otf|eot|woff|woff2)$/)
      .use('file-loader')
      .loader('file-loader')
      .tap(options => {
        // 修改file-loader的配置
        options.name = 'fonts/[name].[hash:8].[ext]'
        return options
      })
  }
}

上述代码会将所有ttf、otf、eot、woff、woff2文件的路径转换为项目中的 /fonts/ 目录，并添加8位哈希值以防止缓存问题。

在项目中使用@font-face引入字体文件，例如：

@font-face {
  font-family: 'MyFont';
  src: url('@/assets/fonts/MyFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

在上述代码中，@符号表示src目录，因此我们可以使用@/assets/fonts/来引用字体文件。

在需要使用该字体的组件或样式中使用font-family属性来设置字体，例如：

.my-text {
  font-family: 'MyFont', sans-serif;
  font-size: 16px;
}

在上述代码中，sans-serif是一个备选字体，如果MyFont字体无法加载，将使用默认的sans-serif字体代替。

通过上述步骤，我们可以在Vue项目中缓存ttf文件并使用@font-face，为页面添加自定义字体