วิธีเพิ่มแบบอักษรสำหรับโครงการที่ใช้แอปสร้างแบบโต้ตอบ

ฉันใช้สร้างปฏิกิริยาแอปejectและไม่ต้องการที่จะ

ไม่ชัดเจนว่าที่ใดที่ฟอนต์ที่นำเข้าผ่าน @ font-face และโหลดแบบโลคัลควรดำเนินการ

คือฉันกำลังโหลด

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

ข้อเสนอแนะใด ๆ

- แก้ไข

รวมถึงส่วนสำคัญที่ Dan อ้างถึงในคำตอบของเขา

➜  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');
}

มีสองตัวเลือก:

ใช้การนำเข้า

นี่คือตัวเลือกที่แนะนำ ทำให้มั่นใจว่าแบบอักษรของคุณผ่านขั้นตอนการสร้างรับแฮชระหว่างการรวบรวมเพื่อให้การแคชเบราว์เซอร์ทำงานได้อย่างถูกต้องและคุณได้รับข้อผิดพลาดในการคอมไพล์หากไฟล์หายไป

ตามที่อธิบายไว้ใน“ การเพิ่มรูปภาพแบบอักษรและไฟล์”คุณต้องมีไฟล์ CSS ที่นำเข้าจาก JS ตัวอย่างเช่นโดยsrc/index.jsการนำเข้าเริ่มต้นsrc/index.css:

import './index.css';

ไฟล์ CSS เช่นนี้ต้องผ่านขั้นตอนการสร้างและสามารถอ้างอิงแบบอักษรและรูปภาพ ตัวอย่างเช่นหากคุณใส่แบบอักษรsrc/fonts/MyFont.woffของคุณindex.cssอาจรวมถึงสิ่งนี้:

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

สังเกตว่าเราใช้เส้นทางสัมพัทธ์เริ่มต้น./อย่างไร นี่เป็นสัญกรณ์พิเศษที่ช่วยให้บิวด์ไพพ์ไลน์ (ขับเคลื่อนโดย Webpack) ค้นพบไฟล์นี้

โดยปกติควรจะเพียงพอ

ใช้publicโฟลเดอร์

ถ้าด้วยเหตุผลบางอย่างคุณไม่ต้องการใช้ไพพ์ไลน์และแทนที่จะใช้วิธี "คลาสสิค" แทนคุณสามารถใช้publicโฟลเดอร์และวางฟอนต์ของคุณได้

ข้อเสียของวิธีการนี้คือไฟล์จะไม่ได้รับการแฮชเมื่อคุณรวบรวมเพื่อการผลิตดังนั้นคุณจะต้องอัปเดตชื่อของพวกเขาทุกครั้งที่คุณเปลี่ยนไฟล์มิฉะนั้นเบราว์เซอร์จะแคชเวอร์ชันเก่า

หากคุณต้องการที่จะทำมันด้วยวิธีนี้ใส่แบบอักษรบางลงในโฟลเดอร์เช่นลงpublic public/fonts/MyFont.woffถ้าคุณทำตามวิธีนี้คุณควรใส่ไฟล์ CSS ลงในpublicโฟลเดอร์ด้วยและอย่านำเข้าไฟล์จาก JS เพราะการผสมวิธีเหล่านี้จะทำให้เกิดความสับสนมาก public/index.cssดังนั้นหากคุณยังคงต้องการที่จะทำมันคุณจะมีไฟล์เหมือน คุณจะต้องเพิ่ม<link>สไตล์ชีทนี้ด้วยตนเองจากpublic/index.html:

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

และข้างในนั้นคุณจะใช้สัญลักษณ์ CSS ปกติ:

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

สังเกตว่าฉันใช้fonts/MyFont.woffเป็นเส้นทาง นี่เป็นเพราะindex.cssอยู่ในpublicโฟลเดอร์ดังนั้นจึงจะให้บริการจากเส้นทางสาธารณะ (โดยปกติจะเป็นรูทเซิร์ฟเวอร์ แต่ถ้าคุณปรับใช้กับหน้า GitHub และตั้งค่าhomepageเขตข้อมูลของคุณhttp://myuser.github.io/myprojectเป็นจะให้บริการจาก/myproject) อย่างไรก็ตามfontsยังอยู่ในpublicโฟลเดอร์ดังนั้นจึงจะได้รับบริการจากที่fontsค่อนข้าง (อย่างใดอย่างหนึ่งhttp://mywebsite.com/fontsหรือhttp://myuser.github.io/myproject/fonts) ดังนั้นเราจึงใช้เส้นทางสัมพัทธ์

โปรดทราบว่าเนื่องจากเรากำลังหลีกเลี่ยงการ build ไปป์ในตัวอย่างนี้ก็ไม่ได้ตรวจสอบว่าไฟล์มีอยู่จริง นี่คือเหตุผลที่ฉันไม่แนะนำวิธีการนี้ ปัญหาอีกประการคือindex.cssไฟล์ของเราไม่ได้รับการย่อขนาดและไม่ได้รับการแฮช ดังนั้นมันจะช้าลงสำหรับผู้ใช้ปลายทางและคุณเสี่ยงต่อเบราว์เซอร์ที่แคชไฟล์เวอร์ชันเก่า

 วิธีการใช้งาน?

ไปกับวิธีแรก (“ ใช้การนำเข้า”) ฉันแค่อธิบายสิ่งที่สองเนื่องจากนั่นคือสิ่งที่คุณพยายามทำ (ตัดสินโดยความคิดเห็นของคุณ) แต่มันมีปัญหามากมายและควรเป็นทางเลือกสุดท้ายเมื่อคุณแก้ไขปัญหาบางอย่าง

นี่คือวิธีทำสิ่งนี้:

1. การนำเข้าแบบอักษร

ตัวอย่างเช่นสำหรับการใช้ Roboto ให้ติดตั้งแพ็คเกจโดยใช้

yarn add typeface-roboto

หรือ

npm install typeface-roboto --save

ใน index.js:

import "typeface-roboto";

มีแพ็กเกจ npm สำหรับฟอนต์โอเพนซอร์สจำนวนมากและฟอนต์ Google ส่วนใหญ่ คุณสามารถดูแบบอักษรทั้งหมดที่นี่ แพ็คเกจทั้งหมดมาจากโครงการนั้น

2. สำหรับแบบอักษรที่โฮสต์โดยบุคคลที่สาม

ตัวอย่างเช่นแบบอักษรของ Google คุณสามารถไปที่fonts.google.comซึ่งคุณสามารถค้นหาลิงก์ที่คุณสามารถใส่ในpublic/index.html

มันจะเป็นเช่นนั้น

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

หรือ

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

3. การดาวน์โหลดแบบอักษรและเพิ่มลงในซอร์สโค้ดของคุณ

ดาวน์โหลดแบบอักษร ตัวอย่างเช่นสำหรับแบบอักษร google คุณสามารถไปที่fonts.google.com คลิกที่ปุ่มดาวน์โหลดเพื่อดาวน์โหลดแบบอักษร

ย้ายแบบอักษรไปยังfontsไดเรกทอรีในsrcไดเรกทอรีของคุณ

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

ตอนนี้ในApp.cssเพิ่ม

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

สำหรับรูปแบบที่คุณต้องพูดถึงttf format('truetype')สำหรับwoff,format('woff')

ตอนนี้คุณสามารถใช้แบบอักษรในชั้นเรียน

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

4. ใช้แพ็คเกจ web-font-loader

ติดตั้งแพ็คเกจโดยใช้

yarn add webfontloader

หรือ

npm install webfontloader --save

ในsrc/index.jsคุณสามารถนำเข้าสิ่งนี้และระบุแบบอักษรที่ต้องการ

import WebFont from 'webfontloader';

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

1. ไปที่ Google แบบอักษรhttps://fonts.google.com/
2. เลือกแบบอักษรตามที่แสดงในภาพด้านล่าง:

3. คัดลอกแล้ววาง URL นั้นในแท็บใหม่คุณจะได้รับรหัส css เพื่อเพิ่มแบบอักษรนั้น ในกรณีนี้ถ้าคุณไป

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

มันจะเปิดแบบนี้:

4 คัดลอกและวางรหัสนั้นใน style.css ของคุณและเพียงเริ่มใช้แบบอักษรเช่นนี้:

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

ผลลัพธ์:

คุณสามารถใช้โมดูลWebFontซึ่งจะทำให้กระบวนการง่ายขึ้นมาก

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

ฉันทำผิดพลาดแบบนี้

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

มันทำงานอย่างถูกต้องด้วยวิธีนี้

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

ฉันใช้เวลาทั้งเช้าเพื่อแก้ไขปัญหาที่คล้ายกันหลังจากที่ได้ลงคำถามกองซ้อนนี้ ฉันใช้วิธีแก้ปัญหาแรกของ Dan ในคำตอบข้างต้นเป็นจุดกระโดด

ปัญหา

ฉันมี dev (นี่คือเครื่องท้องถิ่นของฉัน) การจัดเตรียมและสภาพแวดล้อมการผลิต สภาพแวดล้อมการจัดเตรียมและการผลิตของฉันมีชีวิตอยู่บนเซิร์ฟเวอร์เดียวกัน

แอพนี้ได้รับการปรับใช้กับการจัดเตรียมผ่านacmeserver/~staging/note-taking-appและเวอร์ชันการใช้งานอยู่ที่acmeserver/note-taking-app(ตำหนิไอที)

ไฟล์สื่อทั้งหมดเช่นฟอนต์ถูกโหลดอย่างสมบูรณ์แบบบน dev (เช่น, react-scripts start)

อย่างไรก็ตามเมื่อฉันสร้างและอัปโหลดสถานะการสร้างและการผลิตในขณะที่.cssและ.jsไฟล์กำลังโหลดอย่างถูกต้องแบบอักษรไม่ได้ .cssไฟล์ที่คอมไพล์ดูเหมือนจะมีเส้นทางที่ถูกต้อง แต่คำขอ http ของเบราว์เซอร์ได้รับเส้นทางผิดอย่างมาก (แสดงด้านล่าง)

main.fc70b10f.chunk.cssไฟล์ที่รวบรวม:

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

คำขอ http ของเบราว์เซอร์แสดงอยู่ด้านล่าง โปรดสังเกตว่ามันเพิ่มเข้ามาอย่างไร/static/css/เมื่อไฟล์ฟอนต์มีชีวิต/static/media/เช่นเดียวกับการทำซ้ำโฟลเดอร์ปลายทาง ฉันตัดการกำหนดค่าเซิร์ฟเวอร์ออกเป็นผู้ร้าย

Refererคือส่วนหนึ่งที่ผิดพลาดมากเกินไป

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

package.jsonไฟล์ได้คุณสมบัติการตั้งค่าให้homepage ./note-taking-appนี่เป็นสาเหตุของปัญหา

{
  "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"
  }
  //...
}

สารละลาย

นั่นยืดยาว - แต่วิธีแก้ไขคือ:

1. เปลี่ยนPUBLIC_URLตัวแปร env ขึ้นอยู่กับสภาพแวดล้อม
2. ลบhomepageคุณสมบัติออกจากpackage.jsonไฟล์

ด้านล่างเป็น.env-cmdrcไฟล์ของฉัน ฉันใช้.env-cmdrcมากกว่าปกติ.envเพราะมันรวมทุกอย่างไว้ในไฟล์เดียว

{
  "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"
  }
}

การกำหนดเส้นทางผ่านreact-router-domทำงานได้ดีเช่นกัน - เพียงใช้PUBLIC_URLตัวแปร env เป็นbasenameคุณสมบัติ

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

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

export { createRouter };

เซิร์ฟเวอร์กำหนดค่าให้กำหนดเส้นทางคำขอทั้งหมดไปยัง./index.htmlไฟล์

ท้ายที่สุดนี่คือสิ่งที่main.fc70b10f.chunk.cssไฟล์ที่คอมไพล์ดูเหมือนว่าหลังจากการเปลี่ยนแปลงที่กล่าวถึงถูกนำไปใช้

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

วัสดุการอ่าน

• 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

  • สิ่งนี้อธิบายถึงPUBLIC_URLตัวแปรสภาพแวดล้อม

    สร้างแอป React สมมติว่าแอปพลิเคชันของคุณโฮสต์อยู่ที่รูทของเว็บเซิร์ฟเวอร์ที่ให้บริการหรือ subpath ตามที่ระบุใน package.json (โฮมเพจ) โดยปกติแล้วแอปสร้างแอป React จะไม่สนใจชื่อโฮสต์ คุณอาจใช้ตัวแปรนี้เพื่อบังคับให้เนื้อหาถูกอ้างอิงคำต่อคำไปยัง URL ที่คุณระบุ (รวมชื่อโฮสต์) สิ่งนี้อาจมีประโยชน์อย่างยิ่งเมื่อใช้ CDN เพื่อโฮสต์แอปพลิเคชันของคุณ