如何将Google字体添加到VueJS组件？

Question

我已经尝试了一个小时来找到将Google字体导入VueJS组件的方法,但我似乎无法找到解决方案,什么都没有用,甚至还没有以前的StackOverflow问题.我发现的所有答案现在都是1.5到2岁.如果有人能提出最新的解决方案,我将非常感激.

我正在使用VueJS2 + Webpack + Vue-cli

Answer 1

最快的方法是将其导入CSS文件,例如App.css,如果所有组件都应该包含它:

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

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

#app {
  font-family: 'Roboto Condensed', sans-serif;
}

导入语句也由Google字体显示(@IMPORT在选择窗口中单击):

Answer 2

我想补充 msqar 给出的答案。如果您打算使用 Google Fonts Webpack 插件：（https://www.npmjs.com/package/google-fonts-webpack-plugin）并且您使用的是 Vue CLI，则可以添加一个 vue.config.js 文件在项目的根目录中。请参阅 Vue CLI 文档：（https://cli.vuejs.org/guide/webpack.html#simple-configuration）

然后将代码添加到该文件中：

 const GoogleFontsPlugin = require("google-fonts-webpack-plugin");

 module.exports = {
    chainWebpack: config => {
        plugins: [
            new GoogleFontsPlugin({
                fonts: [
                    { family: "Source Sans Pro" }
                ]
            })
        ]
     }
 }

Answer 3

Imo，如果您使用的是VueJS，则可以使用Google Fonts Webpack插件。

这是插件，设置起来非常容易，并且像一个吊饰一样工作。

npm i google-fonts-webpack-plugin -D

转到您的/webpack.config.js/ webpack.base.config.js并添加以下行：

const GoogleFontsPlugin = require("google-fonts-webpack-plugin")

module.exports = {
    "entry": "index.js",
    /* ... */
    plugins: [
        new GoogleFontsPlugin({
            fonts: [
                { family: "Source Sans Pro" },
                { family: "Roboto", variants: [ "400", "700italic" ] }
            ]
        })
    ]
}

现在，您可以在VueJS项目内的任何地方使用Google字体：）

Answer 4

我没有看到在 Vue 中本地使用 web 字体的好例子。所以这是我使用的一个例子。我在 CSS 文件中定义了一些 SASS 变量和 Web 字体，这些文件被全局添加到我的应用程序中，因此我不必将每个文件单独导入到我的组件中。请注意，对于资产文件夹别名~@/assets，Web 字体的导入具有不同的语法。

vue.config.js

css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/css/global.scss";
        `
      }
    }
  }

在我的 CSS 文件 global.scss 中，我有：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('OpenSans-Regular-400'), url(~@/assets/fonts/OpenSans-Regular-400.woff) format('woff');
}

/* color variables */

$corporate-blue: #005496;

Answer 5

使用 Vue3 和 CLI

对于带有 CLI 的 Vue 3，我使用 fork @beyonk/google-fonts-webpack-plugin在本地包含字体。这也可能适用于 Vue2 和最新的 CLI 版本。原来的包已经不能用了。

npm i -D @beyonk/google-fonts-webpack-plugin

在你的vue.config.js添加中

const GoogleFontsPlugin = require("@beyonk/google-fonts-webpack-plugin")

// vue.config.js
module.exports = {
    configureWebpack: {
        plugins: [
            new GoogleFontsPlugin({
                fonts: [
                    { family: "Poppins", variants: [ "500", "700" ] }
                ]
            })
        ]
    }
}