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

我正在使用 https://github.com/facebookincubator/create-react-app并且不想“弹出”..

目前尚不清楚从@ 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');
}

有什么建议么？

– 编辑

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

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

解决方法

有两种选择：

使用进口

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

作为described in “Adding Stylesheets on Fonts”,您需要从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提供支持)发现此文件.

通常这应该足够了.

使用公用文件夹

如果出于某种原因你不想使用构建管道,而是使用“经典方式”,你可以将use the public folder放在那里.

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

如果你想这样做,将字体放在公共文件夹中,例如,放入public / fonts / MyFont.woff.如果您遵循这种方法,您应该将CSS文件放入公共文件夹,而不是从JS导入它们,因为混合这些方法会非常混乱.所以,如果你仍然想要这样做,你会有一个像public / index.css这样的文件.您必须手动添加< link>从public / index.html到这个样式表：

<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位于公共文件夹中,因此它将从公共路径提供(通常是服务器根目录,但是如果部署到GitHub页面并将主页字段设置为http://myuser.github.io/ myproject,它将从/ myproject提供).但是,字体也在公共文件夹中,因此它们将相对地从字体提供(http://mywebsite.com/fonts或http://myuser.github.io/myproject/fonts).因此我们使用相对路径.

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

使用哪种方式？

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

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

解决方法

猜你在找的CSS相关文章