Bagaimana cara menambahkan font untuk membuat proyek berbasis-aplikasi?

Saya menggunakan create-react-app dan memilih untuk tidak melakukannya eject.

Tidak jelas ke mana font yang diimpor melalui @ font-wajah dan dimuat secara lokal harus pergi.

Yaitu, saya memuat

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

Ada saran?

- EDIT

Termasuk intisari yang dimaksud Dan dalam jawabannya

➜  Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts
total 1168
-rwxr-xr-x@ 1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND.woff
-rwxr-xr-x@ 1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  60044 Mar 17  2014 MYRIADPRO-COND.woff
-rwxr-xr-x@ 1 maximveksler  staff  64656 Mar 17  2014 MYRIADPRO-CONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  61848 Mar 17  2014 MYRIADPRO-REGULAR.woff
-rwxr-xr-x@ 1 maximveksler  staff  62448 Mar 17  2014 MYRIADPRO-SEMIBOLD.woff
-rwxr-xr-x@ 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');
}

Ada dua opsi:

Menggunakan Impor

Ini adalah opsi yang disarankan. Ini memastikan font Anda melewati pipeline build, mendapatkan hash saat kompilasi sehingga cache browser berfungsi dengan benar, dan Anda mendapatkan kesalahan kompilasi jika file hilang.

Seperti yang dijelaskan dalam "Menambahkan Gambar, Font, dan File" , Anda harus memiliki file CSS yang diimpor dari JS. Misalnya, dengan src/index.jsimpor default src/index.css:

import './index.css';

File CSS seperti ini melewati pipeline build, dan dapat merujuk font dan gambar. Misalnya, jika Anda memasukkan font src/fonts/MyFont.woff, Anda index.cssmungkin menyertakan ini:

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

Perhatikan bagaimana kami menggunakan jalur relatif yang dimulai dengan ./. Ini adalah notasi khusus yang membantu pipeline build (diberdayakan oleh Webpack) menemukan file ini.

Biasanya ini sudah cukup.

Menggunakan publicFolder

Jika karena alasan tertentu Anda memilih untuk tidak menggunakan pipa build, dan alih-alih melakukannya dengan "cara klasik", Anda dapat menggunakan publicfolder dan meletakkan font Anda di sana.

Kelemahan dari pendekatan ini adalah bahwa file tidak mendapatkan hash ketika Anda mengkompilasi untuk produksi sehingga Anda harus memperbarui nama mereka setiap kali Anda mengubahnya, atau browser akan men-cache versi lama.

Jika Anda ingin melakukannya dengan cara ini, masukkan font di suatu tempat ke dalam publicfolder, misalnya, ke public/fonts/MyFont.woff. Jika Anda mengikuti pendekatan ini, Anda harus meletakkan file CSS ke publicfolder juga dan tidak mengimpornya dari JS karena menggabungkan pendekatan ini akan sangat membingungkan. Jadi, jika Anda masih ingin melakukannya, Anda akan memiliki file seperti public/index.css. Anda harus menambahkan secara manual <link>ke stylesheet ini dari public/index.html:

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

Dan di dalamnya, Anda akan menggunakan notasi CSS biasa:

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

Perhatikan bagaimana saya menggunakan fonts/MyFont.woffsebagai jalur. Ini karena index.cssada di publicfolder sehingga akan disajikan dari jalur publik (biasanya itu root server, tetapi jika Anda menyebarkan ke Halaman GitHub dan mengatur homepagebidang Anda http://myuser.github.io/myproject, itu akan dilayani dari /myproject). Namun fontsjuga ada di publicfolder, sehingga mereka akan dilayani dari yang fontsrelatif (salah satu http://mywebsite.com/fontsatau http://myuser.github.io/myproject/fonts). Karena itu kami menggunakan jalur relatif.

Perhatikan bahwa karena kita menghindari pipeline build dalam contoh ini, itu tidak memverifikasi bahwa file tersebut benar-benar ada. Inilah mengapa saya tidak merekomendasikan pendekatan ini. Masalah lain adalah index.cssfile kita tidak di-minify dan tidak di-hash. Jadi itu akan menjadi lebih lambat bagi pengguna akhir, dan Anda berisiko peramban melakukan caching versi lama file tersebut.

 Cara yang Digunakan?

Pergilah dengan metode pertama ("Menggunakan Impor"). Saya hanya menggambarkan yang kedua karena itulah yang Anda coba lakukan (menilai dengan komentar Anda), tetapi itu memiliki banyak masalah dan seharusnya hanya menjadi pilihan terakhir ketika Anda sedang menangani beberapa masalah.

Berikut ini beberapa cara untuk melakukan ini:

1. Mengimpor font

Misalnya, untuk menggunakan Roboto, instal paket menggunakan

yarn add typeface-roboto

atau

npm install typeface-roboto --save

Di index.js:

import "typeface-roboto";

Ada paket npm untuk banyak font sumber terbuka dan sebagian besar font Google. Anda dapat melihat semua font di sini . Semua paket berasal dari proyek itu .

2. Untuk font yang diselenggarakan oleh pihak ketiga

Misalnya font Google, Anda dapat membuka fonts.google.com di mana Anda dapat menemukan tautan yang dapat Anda masukkan ke dalampublic/index.html

Itu akan seperti

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

atau

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

3. Mengunduh font dan menambahkannya dalam kode sumber Anda.

Unduh fontnya. Misalnya, untuk font google, Anda dapat mengunjungi fonts.google.com . Klik tombol unduh untuk mengunduh font.

Pindahkan font ke fontsdirektori di srcdirektori Anda

src
|
`----fonts
|      |
|      `-Lato/Lato-Black.ttf
|       -Lato/Lato-BlackItalic.ttf
|       -Lato/Lato-Bold.ttf
|       -Lato/Lato-BoldItalic.ttf
|       -Lato/Lato-Italic.ttf
|       -Lato/Lato-Light.ttf
|       -Lato/Lato-LightItalic.ttf
|       -Lato/Lato-Regular.ttf
|       -Lato/Lato-Thin.ttf
|       -Lato/Lato-ThinItalic.ttf
|
`----App.css

Sekarang, masuk App.css, tambahkan ini

@font-face {
  font-family: 'Lato';
  src: local('Lato'), url(./fonts/Lato-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Black.otf) format('opentype');
}

Untuk ttfformat, Anda harus menyebutkan format('truetype'). Untuk woff,format('woff')

Sekarang Anda dapat menggunakan font di kelas.

.modal-title {
    font-family: Lato, Arial, serif;
    font-weight: black;
}

4. Menggunakan paket web-font-loader

Instal paket menggunakan

yarn add webfontloader

atau

npm install webfontloader --save

Di src/index.js, Anda dapat mengimpor ini dan menentukan font yang diperlukan

import WebFont from 'webfontloader';

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

1. Buka Google Fonts https://fonts.google.com/
2. Pilih font Anda seperti yang digambarkan dalam gambar di bawah ini:

3. Salin dan tempelkan url itu di tab baru Anda akan mendapatkan kode css untuk menambahkan font itu. Dalam hal ini jika Anda pergi ke

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

Ini akan terbuka seperti ini:

4, Salin dan tempel kode itu di style.css Anda dan mulai gunakan font itu seperti ini:

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

Hasil:

Anda dapat menggunakan modul WebFont , yang sangat menyederhanakan prosesnya.

render(){
  webfont.load({
     custom: {
       families: ['MyFont'],
       urls: ['/fonts/MyFont.woff']
     }
  });
  return (
    <div style={your style} >
      your text!
    </div>
  );
}

Saya melakukan kesalahan seperti ini.

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

Ini berfungsi dengan baik dengan cara ini

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

Saya menghabiskan seluruh pagi memecahkan masalah yang sama setelah mendarat di pertanyaan tumpukan ini. Saya menggunakan solusi pertama Dan di jawaban di atas sebagai titik tolak.

Masalah

Saya memiliki dev (ini di mesin lokal saya), pementasan, dan lingkungan produksi. Lingkungan pementasan dan produksi saya tinggal di server yang sama.

Aplikasi ini digunakan untuk pementasan melalui acmeserver/~staging/note-taking-appdan versi produksi tinggal di acmeserver/note-taking-app(salahkan IT).

Semua file media seperti font memuat dengan baik-baik saja di dev (yaitu, react-scripts start).

Namun, ketika saya membuat dan mengunggah pementasan dan produksi, sementara file .cssdan .jsmemuat dengan benar, font tidak. Dikompilasi.css tampaknya memiliki jalur yang benar tetapi permintaan http browser mendapatkan beberapa jalur yang sangat salah (ditampilkan di bawah).

File yang dikompilasi main.fc70b10f.chunk.css:

@font-face {
  font-family: SairaStencilOne-Regular;
  src: url(note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf) ("truetype");
}

Permintaan http browser ditunjukkan di bawah ini. Perhatikan bagaimana hal itu ditambahkan /static/css/ketika file font hanya tinggal /static/media/dan juga menduplikasi folder tujuan. Saya mengesampingkan konfigurasi server menjadi pelakunya.

The Referersebagian bersalah juga.

GET /~staging/note-taking-app/static/css/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf HTTP/1.1
Host: acmeserver
Origin: http://acmeserver
Referer: http://acmeserver/~staging/note-taking-app/static/css/main.fc70b10f.chunk.css

The package.jsonberkas memiliki homepageset properti untuk ./note-taking-app. Ini yang menyebabkan masalah.

{
  "name": "note-taking-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "./note-taking-app",
  "scripts": {
    "start": "env-cmd -e development react-scripts start",
    "build": "react-scripts build",
    "build:staging": "env-cmd -e staging npm run build",
    "build:production": "env-cmd -e production npm run build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  //...
}

Larutan

Itu sudah lama bertele-tele - tetapi solusinya adalah:

1. mengubah PUBLIC_URL variabel env tergantung pada lingkungan
2. hapus homepageproperti dari package.jsonfile

Di bawah ini adalah .env-cmdrcfile saya . Saya menggunakan .env-cmdrclebih dari biasa .envkarena menyimpan semuanya bersama dalam satu file.

{
  "development": {
    "PUBLIC_URL": "",
    "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api"
  },
  "staging": {
    "PUBLIC_URL": "/~staging/note-taking-app",
    "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api"
  },
  "production": {
    "PUBLIC_URL": "/note-taking-app",
    "REACT_APP_API": "http://acmeserver/note-taking-app/api"
  }
}

Routing via react-router-domworks fine too - cukup gunakan PUBLIC_URLvariabel env sebagai basenameproperti.

import React from "react";
import { BrowserRouter } from "react-router-dom";

const createRouter = RootComponent => (
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <RootComponent />
  </BrowserRouter>
);

export { createRouter };

Konfigurasi server diatur untuk merutekan semua permintaan ke ./index.htmlfile.

Akhirnya, inilah main.fc70b10f.chunk.csstampilan file yang dikompilasi setelah perubahan yang dibahas diimplementasikan.

@font-face {
  font-family: SairaStencilOne-Regular;
  src: url(/~staging/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf)
    format("truetype");
}

Bahan bacaan

• https://create-react-app.dev/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

• https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing

• https://create-react-app.dev/docs/advanced-configuration

  • ini menjelaskan PUBLIC_URLvariabel lingkungan

    Buat React App menganggap aplikasi Anda di-host di root server web yang melayani atau subpath seperti yang ditentukan dalam package.json (beranda). Biasanya, Buat Bereaksi Aplikasi mengabaikan nama host. Anda dapat menggunakan variabel ini untuk memaksa aset direferensikan kata demi kata ke url yang Anda berikan (termasuk hostname). Ini mungkin sangat berguna saat menggunakan CDN untuk meng-host aplikasi Anda.