如何向基于 create-react-app 的项目添加字体? [英] How to add fonts to create-react-app based projects?

问题描述

我正在使用 create-react-app 并且不想 弹出.

I'm using create-react-app and prefer not to eject.

目前尚不清楚通过@font-face 导入并在本地加载的字体应该放在哪里.

It's not clear where fonts imported via @font-face and loaded locally should go.

也就是说，我正在加载

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

有什么建议吗?

-- 编辑

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

Including the gist to which Dan referring in his answer

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

推荐答案

有两个选项:

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

This is the suggested option. It ensures your fonts go through the build pipeline, get hashes during compilation so that browser caching works correctly, and that you get compilation errors if the files are missing.

如在添加图像、字体"中所述, and Files"，你需要有一个从JS导入的CSS文件.例如，默认情况下 src/index.js 导入 src/index.css:

As described in "Adding Images, Fonts, and Files", you need to have a CSS file imported from JS. For example, by default src/index.js imports src/index.css:

import './index.css';

像这样的 CSS 文件通过构建管道，可以引用字体和图像.例如，如果您在 src/fonts/MyFont.woff 中放置了一种字体，则您的 index.css 可能包含以下内容:

A CSS file like this goes through the build pipeline, and can reference fonts and images. For example, if you put a font in src/fonts/MyFont.woff, your index.css might include this:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
  /* other formats include: 'woff2', 'truetype, 'opentype',
                            'embedded-opentype', and 'svg' */
}

注意我们如何使用以 ./ 开头的相对路径.这是一个特殊的符号，可帮助构建管道(由 Webpack 提供支持)发现此文件.

Notice how we’re using a relative path starting with ./. This is a special notation that helps the build pipeline (powered by Webpack) discover this file.

通常这应该足够了.

如果由于某种原因您不更喜欢使用构建管道，而是采用经典方式"，您可以使用public文件夹 并将您的字体放在那里.

If for some reason you prefer not to use the build pipeline, and instead do it the "classic way", you can use the public folder and put your fonts there.

这种方法的缺点是文件在为生产编译时不会得到哈希值，因此每次更改它们时都必须更新它们的名称，否则浏览器会缓存旧版本.

The downside of this approach is that the files don’t get hashes when you compile for production so you’ll have to update their names every time you change them, or browsers will cache the old versions.

如果您想这样做，请将字体放在 public 文件夹中的某个位置，例如，放入 public/fonts/MyFont.woff.如果你采用这种方法，你应该把 CSS 文件也放到 public 文件夹中，并且不要从 JS 中导入它们，因为混合这些方法会非常混乱.所以，如果你仍然想这样做，你会有一个像 public/index.css 这样的文件.您必须从 public/index.html 手动将 添加到此样式表:

If you want to do it this way, put the fonts somewhere into the public folder, for example, into public/fonts/MyFont.woff. If you follow this approach, you should put CSS files into public folder as well and not import them from JS because mixing these approaches is going to be very confusing. So, if you still want to do it, you’d have a file like public/index.css. You would have to manually add <link> to this stylesheet from public/index.html:

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

在其中，您将使用常规 CSS 符号:

And inside of it, you would use the regular CSS notation:

@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).因此我们使用相对路径.

Notice how I’m using fonts/MyFont.woff as the path. This is because index.css is in the public folder so it will be served from the public path (usually it’s the server root, but if you deploy to GitHub Pages and set your homepage field to http://myuser.github.io/myproject, it will be served from /myproject). However fonts are also in the public folder, so they will be served from fonts relatively (either http://mywebsite.com/fonts or http://myuser.github.io/myproject/fonts). Therefore we use the relative path.

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

Note that since we’re avoiding the build pipeline in this example, it doesn’t verify that the file actually exists. This is why I don’t recommend this approach. Another problem is that our index.css file doesn’t get minified and doesn’t get a hash. So it’s going to be slower for the end users, and you risk the browsers caching old versions of the file.

使用第一种方法(使用导入").我只描述了第二个，因为那是您尝试做的(根据您的评论判断)，但它有很多问题，并且应该只在您解决某些问题时作为最后的手段.

Go with the first method ("Using Imports"). I only described the second one since that’s what you attempted to do (judging by your comment), but it has many problems and should only be the last resort when you’re working around some issue.

这篇关于如何向基于 create-react-app 的项目添加字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！