it-swarm.com.de

Wie füge ich Schriften zu Projekten hinzu, die auf Reaktivitätsanwendungen basieren?

Ich benutze create -react-app und ziehe eject vor.

Es ist nicht klar, wohin über @ font-face importierte und lokal geladene Zeichensätze gehen sollen. 

Ich lade nämlich

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}

Irgendwelche Vorschläge?

- BEARBEITEN

Einschließlich der Gist, auf die sich Dan in seiner Antwort bezieht

➜  Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts
total 1168
[email protected] 1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD.woff
[email protected] 1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND.woff
[email protected] 1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT.woff
[email protected] 1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT.woff
[email protected] 1 maximveksler  staff  60044 Mar 17  2014 MYRIADPRO-COND.woff
[email protected] 1 maximveksler  staff  64656 Mar 17  2014 MYRIADPRO-CONDIT.woff
[email protected] 1 maximveksler  staff  61848 Mar 17  2014 MYRIADPRO-REGULAR.woff
[email protected] 1 maximveksler  staff  62448 Mar 17  2014 MYRIADPRO-SEMIBOLD.woff
[email protected] 1 maximveksler  staff  66232 Mar 17  2014 MYRIADPRO-SEMIBOLDIT.woff
➜  Client git:(feature/trivia-game-ui-2) ✗ cat src/containers/GameModule.css
.GameModule {
  padding: 15px;
}

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-COND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-CONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLD.woff') format('woff');
}
81
Maxim Veksler

Es gibt zwei Möglichkeiten:

Importe verwenden

Dies ist die vorgeschlagene Option. Es stellt sicher, dass Ihre Zeichensätze die Build-Pipeline durchlaufen, während der Kompilierung Hashes abrufen, sodass das Browser-Caching ordnungsgemäß funktioniert und dass Kompilierungsfehler auftreten, wenn die Dateien fehlen.

Als beschrieben in „Hinzufügen von Bildern, Schriftarten und Dateien“ müssen Sie eine CSS-Datei aus JS importieren lassen. Beispielsweise importiert src/index.jssrc/index.css standardmäßig:

import './index.css';

Eine solche CSS-Datei durchläuft die Build-Pipeline und kann auf Zeichensätze und Bilder verweisen. Wenn Sie beispielsweise eine Schrift in src/fonts/MyFont.woff einfügen, könnte Ihr index.css Folgendes enthalten:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}

Beachten Sie, wie wir einen relativen Pfad verwenden, der mit ./ beginnt. Dies ist eine spezielle Notation, die der Build-Pipeline (unterstützt von Webpack) dabei hilft, diese Datei zu ermitteln.

Normalerweise sollte das reichen.

public Ordner verwenden

Wenn Sie not aus irgendeinem Grund vorziehen, die Build-Pipeline zu verwenden, und stattdessen "klassisch" vorgehen, können Sie verwenden Sie den Ordner public und Ihre Zeichensätze dort ablegen.

Der Nachteil dieses Ansatzes besteht darin, dass die Dateien beim Kompilieren für die Produktion keine Hashes erhalten. Sie müssen also bei jeder Änderung ihre Namen aktualisieren, oder die alten Versionen werden von Browsern zwischengespeichert.

Wenn Sie dies auf diese Weise tun möchten, legen Sie die Zeichensätze irgendwo im Ordner public ab, beispielsweise in public/fonts/MyFont.woff. Wenn Sie diesem Ansatz folgen, sollten Sie auch CSS-Dateien im public-Ordner ablegen und not aus JS importieren, da das Mischen dieser Ansätze sehr verwirrend sein kann. Wenn Sie es dennoch tun möchten, haben Sie eine Datei wie public/index.css. Sie müssen <link> manuell von public/index.html zu diesem Stylesheet hinzufügen:

<link rel="stylesheet" href="%PUBLIC_URL%/index.css">

Und darin würden Sie die normale CSS-Notation verwenden:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}

Beachten Sie, wie ich fonts/MyFont.woff als Pfad verwende. Dies liegt daran, dass sich index.css im Ordner public befindet, sodass er über den öffentlichen Pfad bereitgestellt wird (normalerweise ist dies das Server-Root-Verzeichnis. Wenn Sie sich jedoch auf GitHub Pages implementieren und Ihr homepage-Feld auf http://myuser.github.io/myproject setzen, wird es von /myproject bereitgestellt). fonts befindet sich jedoch ebenfalls im Ordner public, sodass sie relativ von fonts (entweder http://mywebsite.com/fonts oder http://myuser.github.io/myproject/fonts) aus bedient werden. Deshalb verwenden wir den relativen Pfad.

Beachten Sie, dass die Build-Pipeline in diesem Beispiel vermieden wird. Sie überprüft jedoch nicht, ob die Datei tatsächlich vorhanden ist. Deshalb empfehle ich diesen Ansatz nicht. Ein weiteres Problem ist, dass unsere index.css-Datei nicht minimiert und kein Hash erhalten wird. Es wird also für die Endbenutzer langsamer und Sie riskieren, dass die Browser alte Versionen der Datei zwischenspeichern.

 Welchen Weg zu benutzen?

Gehen Sie zur ersten Methode ("Importe verwenden"). Ich habe nur das zweite beschrieben, da Sie dies versucht haben (nach Ihrem Kommentar), aber es hat viele Probleme und sollte nur der letzte Ausweg sein, wenn Sie mit einem Problem umgehen.

168
Dan Abramov

Hier sind einige Möglichkeiten, dies zu tun:

1. Schrift importieren

Um beispielsweise Roboto zu verwenden, installieren Sie das Paket mit

yarn add typeface-roboto

oder

npm install typeface-roboto --save

In index.js:

import "typeface-roboto";

Es gibt npm-Pakete für viele Open-Source-Schriftarten und die meisten Google-Schriftarten. Sie können alle Schriftarten hier sehen. Alle Pakete sind von diesem Projekt .

2. Für von Drittanbietern gehostete Schriftarten

Für Google-Schriften können Sie beispielsweise nach fonts.google.com gehen, wo Sie Links finden, die Sie in Ihren public/index.html einfügen können.

 screenshot of fonts.google.com

Es wird so sein

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

oder 

<style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat');
</style>

3. Verwenden des Web-Font-Loader-Pakets

Installieren Sie das Paket mit

yarn add webfontloader

oder

npm install webfontloader --save

In src/index.js können Sie dies importieren und die erforderlichen Schriftarten angeben

import WebFont from 'webfontloader';

WebFont.load({
   google: {
     families: ['Titillium Web:300,400,700', 'sans-serif']
   }
});
3
sudo bangbang

Sie können das Modul WebFont verwenden, das den Prozess erheblich vereinfacht.

render(){
  webfont.load({
     custom: {
       families: ['MyFont'],
       urls: ['/fonts/MyFont.woff']
     }
  });
  return (
    <div style={your style} >
      your text!
    </div>
  );
}
1
Delfino
  1. Gehen Sie zu Google Fonts https://fonts.google.com/
  2. Wählen Sie Ihre Schriftart wie in der Abbildung unten dargestellt aus: 

 enter image description here

  1. Kopieren Sie diese URL und fügen Sie sie in die neue Registerkarte ein. Sie erhalten den CSS-Code, um diese Schriftart hinzuzufügen. In diesem Fall gehen Sie zu

https://fonts.googleapis.com/css?family=Spicy+Rice

Es wird sich wie folgt öffnen:

 enter image description here

4. Kopieren Sie den Code und fügen Sie ihn in Ihre style.css ein. Verwenden Sie die Schriftart einfach wie folgt:

      <Typography
          variant="h1"
          gutterBottom
          style={{ fontFamily: "Spicy Rice", color: "pink" }}
        >
          React Rock
        </Typography>

Ergebnis:

 enter image description here

0
Hitesh Sahu

Ich habe Fehler gemacht.

@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext";
@import "https://use.fontawesome.com/releases/v5.3.1/css/all.css";

Es funktioniert so richtig

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext);
@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
0
Yasin UYSAL