18赞

当前位置: 开发笔记 > 前端 > 正文

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

作者：TXCWB_523 | 2023-09-07 11:00

如何解决《如何为基于create-react-app的项目添加字体？》经验，为你挑选了2个好方法。

我正在使用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');
}

Dan Abramov.. 219

有两种选择:

使用进口

这是建议的选项.它确保您的字体通过构建管道,在编译期间获得哈希,以便浏览器缓存正常工作,并且如果文件丢失,您将收到编译错误.

如"添加图像,字体和文件"中所述,您需要从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:

在其中,您将使用常规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)提供.因此我们使用相对路径.

请注意,由于我们在此示例中避免使用构建管道,因此它不会验证文件是否确实存在.这就是为什么我不推荐这种方法.另一个问题是我们的index.css文件没有被缩小并且没有得到哈希.因此,对于最终用户来说,它会变得更慢,并且您冒着浏览器缓存旧版本文件的风险.

使用哪种方式？

使用第一种方法("使用进口").我只描述了第二个,因为那是你试图做的事情(根据你的评论判断),但它有很多问题,应该只是你解决某些问题时的最后手段.

1> Dan Abramov..：

有两种选择:

使用进口

这是建议的选项.它确保您的字体通过构建管道,在编译期间获得哈希,以便浏览器缓存正常工作,并且如果文件丢失,您将收到编译错误.

如"添加图像,字体和文件"中所述,您需要从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文件夹并将字体放在那里.

这种方法的缺点是,在编译生产时文件不会出现哈希,所以每次更改它们时都必须更新它们的名称,否则浏览器将缓存旧版本.

在其中,您将使用常规CSS表示法:

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

使用哪种方式？

使用第一种方法("使用进口").我只描述了第二个,因为那是你试图做的事情(根据你的评论判断),但它有很多问题,应该只是你解决某些问题时的最后手段.

如果有人添加```ttf```字体,你应该给```truetype```而不是```ttf```作为```format``` [*]的参数(https ://scotch.io/@micwanyoike/how-to-add-fonts-to-a-react-project).

如果您使用`otf`,请关注@milkersarac,您需要输入`opentype`.

@milkersarac你是我的英雄

文档中的一个例子会很有用,我也有点困惑

我发现我实际上不得不使用网址./fonts/Myfont.woff而不是./Myfont.woff

@milkersarac你是最棒的!

字体正在加载，但是文件具有'<hash> .ttf'，并且由于index.css文件仍具有常规路由，因此它们没有加载。有任何想法吗？

2> sudo bangban..：

以下是一些方法：

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

就像

要么

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

推荐阅读

程序员
用手机控制的网站？

如何解决《用手机控制的网站？》经验，为你挑选了1个好方法。 ... [详细]
程序员
通用方法处理IEnumerable与泛型类型不同

如何解决《通用方法处理IEnumerable与泛型类型不同》经验，为你挑选了0个好方法。 ... [详细]
程序员
理解JavaScript中的类关键字

如何解决《理解JavaScript中的类关键字》经验，为你挑选了1个好方法。 ... [详细]
程序员
在数据库中的Yii2会话存储,行太多了？性能？

如何解决《在数据库中的Yii2会话存储,行太多了？性能？》经验，为你挑选了1个好方法。 ... [详细]
程序员
这个对象能够告诉它有多少属性不是null/whitespace/empty有什么问题？

如何解决《这个对象能够告诉它有多少属性不是null/whitespace/empty有什么问题？》经验，为你挑选了1个好方法。 ... [详细]
程序员
在javascript中将字节数组转换为十六进制字符串转换

如何解决《在javascript中将字节数组转换为十六进制字符串转换》经验，为你挑选了3个好方法。 ... [详细]
程序员
添加FXML中定义的元素以循环列出

如何解决《添加FXML中定义的元素以循环列出》经验，为你挑选了1个好方法。 ... [详细]
程序员
使用preg_split分割和弦和单词

如何解决《使用preg_split分割和弦和单词》经验，为你挑选了0个好方法。 ... [详细]
程序员
如何在点图表中清除绘制的值？

如何解决《如何在点图表中清除绘制的值？》经验，为你挑选了1个好方法。 ... [详细]
程序员
Rails:validates_length_of

如何解决《Rails:validates_length_of》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何在Typescript接口文件中表示返回类型？

如何解决《如何在Typescript接口文件中表示返回类型？》经验，为你挑选了0个好方法。 ... [详细]
程序员
从@EmbeddedId类中提取超类时,实体没有持久的id属性

如何解决《从@EmbeddedId类中提取超类时,实体没有持久的id属性》经验，为你挑选了1个好方法。 ... [详细]
程序员
使用Volley请求发送身份验证信息

如何解决《使用Volley请求发送身份验证信息》经验，为你挑选了1个好方法。 ... [详细]
程序员
在java age计算中返回错误的值

如何解决《在javaage计算中返回错误的值》经验，为你挑选了1个好方法。 ... [详细]
程序员
在API级别19以下的Android中选择文件或图像时,如何限制Google驱动器选项不显示？

如何解决《在API级别19以下的Android中选择文件或图像时,如何限制Google驱动器选项不显示？》经验，为你挑选了1个好方法。 ... [详细]
程序员
访问包含在匿名类型或Object类中的字段

如何解决《访问包含在匿名类型或Object类中的字段》经验，为你挑选了1个好方法。 ... [详细]
程序员
无法让pyspark作业在hadoop群集的所有节点上运行

如何解决《无法让pyspark作业在hadoop群集的所有节点上运行》经验，为你挑选了1个好方法。 ... [详细]
程序员
将"Arial"设置为Sitecore文本编辑器中的默认字体

如何解决《将"Arial"设置为Sitecore文本编辑器中的默认字体》经验，为你挑选了1个好方法。 ... [详细]
程序员
使用高级API从特定偏移量开始读取kafka消息

如何解决《使用高级API从特定偏移量开始读取kafka消息》经验，为你挑选了1个好方法。 ... [详细]
程序员
试图在MultiDex应用程序中测试Android模块,com.android.test.runner.MultiDexTestRunner无法识别

如何解决《试图在MultiDex应用程序中测试Android模块,com.android.test.runner.MultiDexTestRunner无法识别》经验，为你挑选了1个好方法。 ... [详细]

TXCWB_523

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章

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

使用进口

使用public文件夹

使用哪种方式？

使用进口

使用public文件夹

使用哪种方式？

1.导入字体

2.对于第三方托管的字体

3.使用web-font-loader软件包

使用`public`文件夹

使用`public`文件夹