如何在基于create-react-app的项目中添加字体？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在基于create-react-app的项目中添加字体？相关的知识，希望对你有一定的参考价值。

我正在使用create-react-app ，但不想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');

有什么建议么？

-编辑

包括丹在回答中提到的要点 

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

有两种选择：

使用导入

这是建议的选项。 它可以确保字体通过构建管道，在编译过程中散列，以便浏览器缓存正常工作，并且在缺少文件的情况下得到编译错误。

如“添加图像，字体和文件”中所述 ，您需要从JS导入CSS文件。 例如，默认情况下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类的文件。 您必须从public/index.html将<link>手动添加到此样式表： 

<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 Pages并将homepage字段设置为http://myuser.github.io/myproject ，它将从/myproject ）。 不过fonts也都在public文件夹，所以他们会从被服务fonts比较（无论是http://mywebsite.com/fonts或http://myuser.github.io/myproject/fonts ）。 因此，我们使用相对路径。

请注意，由于在本示例中我们避免使用构建管道，因此它不会验证文件是否实际存在。 这就是为什么我不推荐这种方法的原因。 另一个问题是我们的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

fonts.google.com的屏幕截图

就像 

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

要么 

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

3.使用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']
   
);
另一答案

您可以使用WebFont模块，这大大简化了过程。 

render()
  webfont.load(
     custom: 
       families: ['MyFont'],
       urls: ['/fonts/MyFont.woff']
     
  );
  return (
    <div style=your style >
      your text!
    </div>
  );
另一答案
  1. 转到Google字体https://fonts.google.com/
  2. 选择您的字体，如下图所示：

在此处输入图片说明

  1. 复制该网址，然后将其粘贴到新标签中，您将获得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>

结果：

在此处输入图片说明

另一答案

我在犯这样的错误。 

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

这样可以正常工作 

@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);
另一答案

在讨论了这个堆栈问题之后，我花了整个上午来解决类似的问题。 在以上答案中，我使用了Dan的第一个解决方案作为起点。

问题

我有一个开发人员（在我的本地计算机上），暂存和生产环境。 我的暂存和生产环境位于同一台服务器上。

该应用程序通过acmeserver/~staging/note-taking-app部署，生产版本位于acmeserver/note-taking-app （ acmeserver/note-taking-app IT）。

所有的媒体文件（如字体）都可以在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/media/时，它是如何添加到/static/css/的，以及如何复制目标文件夹。 我排除了导致服务器配置问题的原因。

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": "re
以上是关于如何在基于create-react-app的项目中添加字体？的主要内容，如果未能解决你的问题，请参考以下文章
 

 如何利用Facebook的create-react-app脚手架创建一个基于ant design mobile的项目


 基于react+如何搭建一个完整的前端框架


 如何将 create-react-app 使用的错误页面合并到自定义项目中？


 基于create-react-app脚手架，按需加载antd组件以及less样式


 如何在 create-react-app 中注入没有 REACT_APP 前缀的 dotenv 变量？


 react.js - 基于create-react-app的打包后文件根路径修改