如何将 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', sans-serif;
}

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

导入语句也由 Google Fonts 显示。

选择你的字体，点击Embed ，然后在选择窗口中@import ：

Answer 2

Imo，如果您使用的是 VueJS，那么 Google Fonts Webpack Plugin 就是最好的选择。

这是插件，设置起来真的很容易，而且效果很好。

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 3

我想补充一下 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 4

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

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" ] }
                ]
            })
        ]
    }
}

Answer 6

不要使用google-fonts-webpack-plugin包或google-fonts-plugin 。 它们不适用于 Vue。

如果您想做 PWA 并离线使用字体，使用@import也不能​​解决问题。

我使用的解决方案是使用fontsource ，他们有所有谷歌字体。 只需使用 yarn 安装您想要的字体，然后将其导入您的 SASS。

Answer 7

在 Vue2 中，只需在 vue 组件内的部分中 @import 字体

<style>
@import url('https://fonts.googleapis.com/css?family=Proza+Libre');
h1 {
    font-family: 'Proza Libre', sans-serif;
    color: seagreen;
    font-weight: 300;
}
</style>

Answer 8

我目前正在这样做：

• 通过 npm 安装字体的字体（例如： npm install --save typeface-source-sans-pro ）
• 在组件中导入字体（ import 'typeface-titillium-web'; ）
• 在组件中使用字体（ font-family: 'Titillium Web', sans-serif; ）

请记住，这样字体就可以自托管了。 因此，您不再支持 cdn 上的缓存字体。

Answer 9

我写在我的css文件中

@font-face {
    font-family: "Assistant";
    src: url("assistant/Assistant-VariableFont_wght.ttf") format("truetype");
}

我根据这个选择了格式： https ://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

然后我添加到 app 元素的类中：

font-family: Assistant;

在 src 部分，如果您没有字体文件，您可以使用字体链接。

Answer 10

由于这似乎是一个长期存在的问题，另一种解决方案是将 go 转换为基本索引 html，然后粘贴也可从 Google fonts 获得的参考文献。这也可以包括可以加快速度的预加载。 例如，在一个站点上，我有以下内容：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,400&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,500&display=swap" rel="stylesheet"> 

（是的，我知道，Fira Sans，咬我：:-)）

这并不能准确回答 OP 的问题，因为他们询问了 fonts 的每个组件添加，但这确实提供了站点范围的字体参考。 不管怎样，这是另一种可能。