如何將 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 的每個組件添加，但這確實提供了站點范圍的字體參考。 不管怎樣，這是另一種可能。