Vue项目中引入自定义字体-优快云博客

本文链接：https://blog.youkuaiyun.com/DF11G_0001/article/details/117560558

本文介绍了如何在Vue项目中，特别是使用Vue-cli3.0的情况下，引入和配置自定义字体。通过创建font.css文件，导入ttf字体，然后在main.js中引入css，并在vue.config.js中配置webpack来处理字体文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PS：经过笔者实践，不是很推荐对字体文件二次处理的做法，在使用字体时会出现很多奇奇怪怪的样式错误。

创建文件夹，把ttf文件放进来。

font.css：每导入一个字体就新建一个@font-face

@font-face {
  font-family: 'SF Pro Display';
  src: url('./SFUIDisplay-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SF Pro Display Heavy';
  src: url('./sf-pro-display_heavy.woff.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SF Pro Display Bold';
  src: url('./SFUIDisplay-Bold.ttf');
  font-weight: normal;
  font-style: normal;
}

在main.js中引入css文件

import './assets/fonts/font.css'

最后在项目配置中添加字体文件。我这里用的是Vue-cli3.0，在vue.config.js的module.exports中配置configureWebpack。

值得一提的是，configureWebpack有两种形式，一种是对象字面量，一种是回调函数。如果是对象字面量形式，则正常添加：


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

    return path.posix.join(assetsSubDirectory, _path)
  },
  resolve: function(dir) {
    return path.join(__dirname, '..', dir)
  }
}
module.exports = {
    configureWebpack: {
        module: {
          rules: [
            {
              test: /\.(woff2?|eot|ttf|otf)(\?.*)$/,
              loader: 'url-loader',
              options: {
                limit: 10000,
                name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
              }
            }
          ]
        }
    }
}

如果是回调函数形式，则：


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

    return path.posix.join(assetsSubDirectory, _path)
  },
  resolve: function(dir) {
    return path.join(__dirname, '..', dir)
  }
}
configureWebpack: config => {
    config.module.rules.push(
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    )
}

然后就可以在项目中使用引入的字体了！