vue如何引入ttf字体文件

Vue.js 是一个流行的前端 JavaScript 框架，它提供了一种简单、高效的方式来构建用户界面，Vue.js 默认不支持自定义字体，这意味着我们不能直接在 Vue.js 项目中引入 TTF 字体文件，我们可以通过一些方法来实现这个功能，本文将介绍如何在 Vue.js 项目中引入 TTF 字体文件。

方法一：使用 Webpack 插件

Webpack 是一个强大的模块打包工具，它可以帮助我们处理各种资源文件，包括字体文件，我们可以使用一个名为 url-loader 的 Webpack 插件来实现这个功能，我们需要安装这个插件：

npm install url-loader --save-dev

在我们的 Webpack 配置文件(通常是 webpack.config.js)中添加以下内容：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.(ttf|otf|eot|woff)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'fonts/[name].[hash:7].[ext]'
            }
          }
        ]
      }
    ]
  }
};

这段配置表示，当遇到 TTF、OTF、EOT 或 WOFF 格式的字体文件时，Webpack 会使用 url-loader 将它们转换为 Base64 编码的 Data URL,并将其存储在 fonts 目录下，这样，我们就可以在 Vue.js 项目中使用这些字体了。

接下来，我们需要在 Vue.js 项目中引入这个字体文件，假设我们有一个名为 Roboto-Regular.ttf 的字体文件，我们可以在项目的入口文件(通常是 main.js)中添加以下代码：

import 'fonts/Roboto-Regular.ttf';

现在，我们应该可以在 Vue.js 项目中使用这个字体了，在我们的 CSS 文件中，我们可以这样设置字体：

body {
  font-family: 'Roboto', sans-serif;
}

方法二：使用 HTML 标签的 @font-face 规则

除了使用 Webpack 插件之外，我们还可以使用 HTML 标签的 @font-face 规则来引入 TTF 字体文件，这种方法的优点是不需要修改 Webpack 配置文件，但缺点是需要手动管理字体文件，以下是如何使用 @font-face 规则引入字体文件的步骤：

1、将 TTF 字体文件放在项目的某个目录下(src/assets/fonts/)。

2、在项目的入口文件(通常是 main.js)中添加以下代码：

const loadFont = (fontName) => new Promise((resolve) => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = https://example.com/fonts/${fontName}.ttf; // 请替换为实际的字体文件 URL
  document.head.appendChild(link);
});
loadFont('Roboto').then((font) => console.log('字体加载完成')); // 请替换为实际的字体名称

这段代码会创建一个新的 <link> 标签，并将其 href 属性设置为字体文件的 URL，我们将这个标签添加到文档的头部，从而触发浏览器加载字体文件，请注意，由于浏览器的安全策略，我们无法直接访问本地文件系统上的字体文件，我们需要将字体文件托管在一个可以访问的服务器上，我们调用 loadFont() 函数来加载指定的字体文件，在这个例子中，我们加载了一个名为 Roboto 的字体文件，你可以根据需要替换为其他字体文件。