Uygulama tabanlı projeler oluşturmak için yazı tipleri nasıl eklenir?

Ben create-tepki-app kullanıyorum ve tercih etmiyorum eject.

@ Font-face üzerinden içe aktarılan ve yerel olarak yüklenen fontların nereye gitmesi gerektiği açık değildir.

Yani, yüklüyorum

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

Baska öneri?

-- DÜZENLE

Dan'ın cevabına atıfta bulunduğu gist dahil

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

İki seçenek vardır:

İçe Aktarmayı Kullanma

Önerilen seçenek budur. Yazı tiplerinizin inşa hattından geçmesini, derleme sırasında karmaları almasını sağlar, böylece tarayıcı önbelleğe alma işlemi düzgün çalışır ve dosyalar eksikse derleme hataları alırsınız.

“Görüntü, Yazı Tipi ve Dosya Ekleme” bölümünde açıklandığı gibi , JS'den içe aktarılmış bir CSS dosyanız olmalıdır. Örneğin, varsayılan olarak src/index.jsiçe aktarmalar src/index.css:

import './index.css';

Bunun gibi bir CSS dosyası derleme ardışık düzeninden geçer ve yazı tiplerine ve görüntülere başvurabilir. Örneğin, içine bir yazı tipi koyarsanız src/fonts/MyFont.woff, index.cssaşağıdakileri içerebilir:

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

İle başlayan göreceli bir yolu nasıl kullandığımıza dikkat edin ./. Bu, yapı hattının (Webpack tarafından desteklenmektedir) bu dosyayı keşfetmesine yardımcı olan özel bir gösterimdir.

Normalde bu yeterli olmalıdır.

publicKlasörü Kullanma

Nedense İsterseniz değil inşa boru hattı kullanmak ve bunun yerine “klasik yol” bunu yapmak için şunları yapabilirsiniz kullanmak publicklasörü ve orada fontları koydu.

Bu yaklaşımın dezavantajı, üretim için derlediğinizde dosyaların karma almamasıdır, bu nedenle her değiştirdiğinizde adlarını güncellemeniz gerekir veya tarayıcılar eski sürümleri önbelleğe alır.

Bu şekilde yapmak istiyorsanız, yazı tiplerini publicklasöre bir yere , örneğin içine koyun public/fonts/MyFont.woff. Bu yaklaşımı izlerseniz, içine CSS dosyaları koymalıyız publicyanı klasörü ve değil bu karıştırma çok kafa karıştırıcı olacak yaklaşımlar nedeniyle JS içe. Yani, hala yapmak istiyorsanız, benzer bir dosyanız olacaktır public/index.css. <link>Bu stil sayfasına aşağıdakilerden manuel olarak eklemeniz gerekir public/index.html:

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

İçinde, normal CSS gösterimini kullanırsınız:

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

fonts/MyFont.woffYol olarak nasıl kullandığımı fark et . Bunun nedeni ise index.cssiçindedir publickamu yoldan sunulacaktır böylece klasöründe (eğer GitHub Sayfalara dağıtmak ve ayarlarsanız genellikle sunucu kök, ama homepagehiç alanını http://myuser.github.io/myproject, bu servis edilecektir /myproject). Ancak fontsda vardır publicbu yüzden gelen servis edilecektir, klasörün fontsnispeten (ya http://mywebsite.com/fontsya http://myuser.github.io/myproject/fonts). Bu nedenle göreli yolu kullanıyoruz.

Bu örnekte derleme satırından kaçındığımızdan, dosyanın gerçekten var olduğunu doğrulamadığını unutmayın. Bu yüzden bu yaklaşımı önermiyorum. Başka bir sorun, index.cssdosyamızın küçültülmemesi ve karma olmamasıdır. Bu yüzden son kullanıcılar için daha yavaş olacak ve tarayıcıların dosyanın eski sürümlerini önbelleğe alma riskiyle karşı karşıya kalacaksınız.

 Hangi Yöntem Kullanılır?

İlk yöntemi uygulayın (“İçe Aktarma İşlemlerini Kullanma”). Sadece ikincisini tanımladım, çünkü yapmaya çalıştığınız şey budur (yorumunuza bakarak), ancak birçok problemi vardır ve sadece bir sorun etrafında çalışırken son çare olmalıdır.

İşte bunu yapmanın bazı yolları:

1. Yazı tipini içe aktarma

Örneğin, Roboto kullanmak için paketi

yarn add typeface-roboto

veya

npm install typeface-roboto --save

İndex.js dosyasında:

import "typeface-roboto";

Birçok açık kaynak yazı tipi ve çoğu Google yazı tipi için npm paketleri vardır. Tüm yazı tiplerini burada görebilirsiniz . Tüm paketler bu projeden .

2. Üçüncü taraflarca barındırılan yazı tipleri için

Örneğin Google yazı tipleri, yazı tiplerine koyabileceğiniz bağlantıları bulabileceğiniz fonts.google.com adresine gidebilirsiniz .public/index.html

Gibi olacak

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

veya

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

3. Yazı tipini indirme ve kaynak kodunuza ekleme.

Yazı tipini indirin. Örneğin, google fontları için fonts.google.com adresine gidebilirsiniz . Yazı tipini indirmek için indir düğmesine tıklayın.

Yazı tipini taşı fontssizin de dizine srcdizine

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

Şimdi App.cssbunu ekleyin

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

İçin ttfbiçimi, sen söz var format('truetype'). İçin woff,format('woff')

Artık yazı tipini sınıflarda kullanabilirsiniz.

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

4. Web yazı tipi yükleyici paketini kullanma

Paketi kullanarak yükle

yarn add webfontloader

veya

npm install webfontloader --save

İçinde src/index.jsbunu içe aktarabilir ve gerekli yazı tiplerini belirtebilirsiniz

import WebFont from 'webfontloader';

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

1. Google Fonts https://fonts.google.com/ adresine gidin.
2. Aşağıdaki resimde gösterildiği gibi yazı tipinizi seçin:

3. Bu URL'yi kopyalayıp yeni sekmeye yapıştırın, bu yazı tipini eklemek için css kodunu alırsınız. Bu durumda,

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

Bu şekilde açılacak:

4, bu kodu kopyalayın ve style.css dosyasına yapıştırın ve bu fontu şu şekilde kullanmaya başlayın:

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

Sonuç:

Süreci büyük ölçüde basitleştiren WebFont modülünü kullanabilirsiniz .

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

Ben böyle hatalar yapıyordum.

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

Bu şekilde düzgün çalışıyor

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

Bütün sabahı bu yığın sorusuna indikten sonra benzer bir problemi çözerek geçirdim. Yukarıdaki cevapta Dan'ın ilk çözümünü atlama noktası olarak kullandım.

Sorun

Bir geliştirme (yerel makinemde), hazırlama ve üretim ortamım var. Evreleme ve üretim ortamlarım aynı sunucuda yaşıyor.

Uygulama üzerinden evreleme dağıtılır acmeserver/~staging/note-taking-appve üretim sürümü acmeserver/note-taking-app(suçlama BT) yaşıyor .

Yazı tipleri gibi tüm medya dosyaları dev (örn react-scripts start.) Üzerinde mükemmel şekilde yükleniyordu .

Ancak, hazırlama ve üretim yapıları oluşturup yüklediğimde, .cssve .jsdosyaları düzgün yüklenirken, yazı tipleri yüklenmedi. Derlenen .cssdosya doğru bir yola sahip görünüyordu, ancak tarayıcı http isteği çok yanlış bir yol alıyordu (aşağıda gösterilmiştir).

Derlenmiş main.fc70b10f.chunk.cssdosya:

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

Tarayıcı http isteği aşağıda gösterilmiştir. /static/css/Yazı tipi dosyası yeni /static/media/oturduğunda ve hedef klasörü çoğalttığında nasıl eklediğine dikkat edin. Ben sunucu yapılandırma suçlu olduğunu dışladı.

RefererÇok hatalı kısmen.

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.jsonDosya vardı homepageiçin özellik seti ./note-taking-app. Bu soruna neden oluyordu.

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

Çözüm

Bu çok uzun sürdü - ama çözüm:

1. PUBLIC_URLenv değişkenini ortama bağlı olarak değiştirme
2. homepageözelliği package.jsondosyadan kaldır

Aşağıda benim .env-cmdrcdosyam. Her şeyi tek bir dosyada bir arada tuttuğu için .env-cmdrcdüzenli olarak kullanıyorum .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"
  }
}

Yönlendirme react-router-domde iyi çalışır - özellik PUBLIC_URLolarak env değişkenini kullanmanız yeterlidir basename.

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

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

export { createRouter };

Sunucu yapılandırması tüm istekleri ./index.htmldosyaya yönlendirecek şekilde ayarlanmıştır .

Son olarak, main.fc70b10f.chunk.csstartışılan değişiklikler uygulandıktan sonra derlenmiş dosya şöyle görünür.

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

Okuma materyali

• 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

  • bu PUBLIC_URLortam değişkenini açıklar

    React App Oluştur, uygulamanızın package.json (homepage) öğesinde belirtildiği gibi, hizmet veren web sunucusunun kök dizininde veya bir alt yolunda barındırıldığını varsayar. Normalde React App Oluştur, ana bilgisayar adını yoksayar. Bu değişkeni, sağladığınız URL'ye eşzamanlı olarak başvuruda bulunmaya zorlamak için kullanabilirsiniz (ana bilgisayar adı dahil). Bu, uygulamanızı barındırmak için bir CDN kullanırken özellikle yararlı olabilir.