如何将字体添加到基于堆的应用程序中?

I'm using https://github.com/facebookincubator/create-react-app and prefer not to "eject"..

我使用的是https://github.com/facebookincubator/create-反应物-app，我不喜欢“弹出”。

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

不清楚通过@font-face导入的字体以及本地加载的字体应该去哪里。

Namely, I'm loading

也就是说,我装载

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

Any suggestions?

有什么建议吗?

-- EDIT

——编辑

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

1 个解决方案

#1

There are two options:

有两个选择:

Using Imports

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.

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

As described in “Adding Stylesheets on Fonts”, you need to have a CSS file imported from JS. For example, by default src/index.js imports src/index.css:

正如“在字体上添加样式表”中描述的，您需要从JS中导入一个CSS文件。例如，默认的src/index。js进口src / index.css:

import './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:

这样的CSS文件通过构建管道，可以引用字体和图像。例如，如果您将字体放在src/font /MyFont中。woff,你的指数。css可能包括:

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

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.

注意我们如何使用相对路径。/。这是一个特殊的符号，它帮助构建管道(由Webpack提供动力)发现这个文件。

Normally this should be enough.

通常这就足够了。

Using public Folder

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.

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

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:

如果您想这样做，请将字体放在公用文件夹中的某个位置，例如，将字体放在公用文件夹/字体/MyFont.woff中。如果您遵循这种方法，您也应该将CSS文件放入公共文件夹，而不是从JS中导入它们，因为混合这些方法会非常混乱。所以，如果你还想这么做，你应该有一个像public/index.css这样的文件。您需要从public/index.html手动添加 到此样式表。

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

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

在它里面，你会使用常规的CSS符号:

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

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.

注意我是如何使用字体/MyFont的。woff的路径。这是因为指数。css位于公共文件夹中，因此它将从公共路径(通常是服务器根目录，但是如果部署到GitHub页面并将主页字段设置为http://myuser.github)。io/myproject，将由/myproject提供服务。但是字体也在公共文件夹中，所以它们将相对地从字体中提供(http://mywebsite.com/fonts或http://myuser.github.io/myproject/)。因此我们使用相对路径。

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.

注意，由于我们在本例中避免了构建管道，所以它不验证文件是否确实存在。这就是为什么我不推荐这种方法。另一个问题是我们的指数。css文件不会被缩小，也不会得到散列。所以最终用户的速度会变慢，浏览器会缓存旧版本的文件。

 Which Way to Use?

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.

使用第一个方法(“使用导入”)。我只描述了第二件事，因为那是你试图做的事情(根据你的评论来判断)，但是它有很多问题，当你在处理某个问题时，它应该是最后的手段。