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

Question

我已经尝试了一个小时来找到一种将 Google 字体导入 VueJS 组件的方法，但我似乎找不到解决方案，还没有任何工作，甚至没有以前 StackOverflow 问题中的内容。我找到的所有答案现在都是 1.5 到 2 岁。如果有人可以提出最新的解决方案，我将不胜感激。

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

原文由 Holiday 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 ：

原文由 Bennett Dams 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 字体 :)

原文由 msqar 发布，翻译遵循 CC BY-SA 4.0 许可协议