Wie füge ich ein Google-Schriftart, um eine VueJS Komponente?

Ich versuche schon seit einer Stunde einen Weg finden, importieren Sie eine Google-Schriftart, die in einen VueJS Komponente, aber ich kann nicht scheinen, um eine Lösung zu finden, hat nicht geklappt, noch nicht einmal der Stoff, aus früheren StackOverflow-Fragen. Alle Antworten, die ich gefunden habe, sind 1,5 bis 2 Jahre alt jetzt. Ich würde es sehr begrüßen, wenn jemand könnte Ihnen eine up-to-date-Lösung.

Ich bin mit VueJS2 + Webpack + Vue-cli

  • Sie sollten sagen, was Sie bisher ausprobiert habe
  • Ich kann nicht backtrace von dem, was ich versucht habe. Ich habe versucht, Lösungen aus allen Blogs, stackoverflow, quora Frage, vuejs hatte, dass Thema, aber alle von Ihnen waren für VueJS und nicht VueJS2. Nicht finden können, was auf VueJS2.Ich bin mir sicher, dass jeder up-to-date-Lösung funktionieren würde
  • Stellt sich heraus, es war unmöglich zu sehen, Fehler die ganze Zeit, dass sollte nicht sein. Zwei Stunden auf einem bug-wie üblich. Vielen Dank für Ihre Zeit zu Antworten Andre.
  • Die Standard - @import Art und Weise beschrieben, in der Google Fonts funktioniert gut (check-App.vue): codesandbox.io/s/5yyp394zon | Auch die <link> Weg (check index.html): codesandbox.io/s/40v3z6vy3x
InformationsquelleAutor Holiday | 2018-07-25
  1. 21

    Der Schnellste Weg ist, um importieren Sie die schriftart in einem CSS-Datei, zum Beispiel App.css, wenn alle Komponenten haben sollte:

    @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;
}

    Die import-Anweisung ist, zeigt auch Google Fonts (klicken Sie auf @IMPORT im Auswahl-Fenster):

    Wie füge ich ein Google-Schriftart, um eine VueJS Komponente?

    InformationsquelleAutor Bennett Dams
  2. 6

    Imo, wenn Sie VueJS, Google Fonts Webpack-Plugin ist Weg.

    Hier ist die plugin, es ist wirklich einfach, um es einzurichten und funktioniert wie ein Charme.

    npm i google-fonts-webpack-plugin -D

    Gehen Sie zu Ihrem /webpack.config.js /webpack.base.config.js und fügen Sie die folgenden Zeilen:

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

    Nun können Sie Google Fonts überall in Ihrem VueJS Projekt 🙂

    InformationsquelleAutor msqar
  3. 4

    Ich hinzufügen möchte, die Antwort msqar. Wenn Sie sich für die Nutzung von Google Fonts Webpack Plugin: (https://www.npmjs.com/package/google-fonts-webpack-plugin )
    und Sie sind mit dem Vue-CLI können Sie eine vue.config.js Datei im Stammverzeichnis Ihres Projekts. Sehen Vue CLI-docs: (https://cli.vuejs.org/guide/webpack.html#simple-configuration)

    Dann fügen Sie den code in diese Datei: 

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

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

    In Vue2, nur mit @import die schriftart im Abschnitt in Ihrem vue-Komponente

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

    Ich bin derzeit dabei es wie folgt aus:

    • Installieren Sie die schriftart auf die schriftart, die per npm (zB: npm install --save typeface-source-sans-pro)
    • Import der Schrift in der Komponente (import 'typeface-titillium-web';)
    • Verwenden Sie die schriftart in der Komponente (font-family: 'Titillium Web', sans-serif;)

    Beachten Sie, dass mit dieser die Schrift wird selbst gehostet. So dass Sie don ' T haben die Unterstützung der Cache-Schriften auf einem cdn nicht mehr.

    InformationsquelleAutor schnetzi
Schreibe einen Kommentar