我用的是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');
}

推荐答案

有两个选项:

使用导入

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

作为described in “Adding Images, Fonts, and Files”,您需要有一个从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');
  /* other formats include: 'woff2', 'truetype, 'opentype',
                            'embedded-opentype', and 'svg' */
}

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

通常这就足够了.

Using public Folder

如果出于某种原因,您更喜欢使用not构建管道,而不是使用"classic 方式",您可以 Select use the public folder并将您的字体放在那里.

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

如果您想这样做,可以将字体放到public文件夹中的某个位置,例如,放到public/fonts/MyFont.woff文件夹中.如果您遵循此方法,您也应该将CSS文件放入public个文件夹中,并从JS导入not个文件,因为混合使用这些方法将会非常混乱.所以,如果你还想这样做,你会有一个像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位于public文件夹中,因此将从公共路径提供服务(通常是服务器根目录,但如果部署到GitHub页面并将homepage字段设置为http://myuser.github.io/myproject,则将从/myproject提供服务).然而,fonts也在public文件夹中,因此它们将相对地从fonts开始(http://mywebsite.com/fontshttp://myuser.github.io/myproject/fonts)提供服务.因此,我们使用相对路径.

请注意,因为在本例中我们避免使用构建管道,所以它不会验证文件是否确实存在.这就是为什么我不推荐这种方法.另一个问题是,我们的index.css文件没有缩小,也没有得到散列.因此,对于最终用户来说,速度会变慢,而且浏览器可能会缓存文件的旧版本.

那该用哪种方式呢?

使用第一种方法("使用导入").我只描述了第二个,因为这是你试图做的(从你的 comments 来看),但它有很多问题,只有当你在解决一些问题时,它才应该是最后的手段.

Css相关问答推荐

Css-如何隐藏WP管理菜单上没有css类的第4<;li&>

当鼠标悬停在元素的::第一行时,如何应用样式?

如何以Angular 将下拉面板的宽度与其文本框对齐

如何使用DirectusImage标签作为背景?

在文本之前添加了额外的空间-Angular 树视图CSS

滚动弹性盒

Bootstrap 和 Sass:将 SCSS 文件转换为 CSS 时出错.错误:$theme-colors-rgb 中未定义变量 @each $color、$value

如何将数据从样式化组件发送到函数?

有没有办法让 mui v5 呈现没有 css-xxx 前缀的类名?

在嵌套的弹性框中创建弹性项目之间的空间

修复导航栏隐藏页面内容

是否可以删除悬停在链接上时出现的手形光标? (或将其设置为普通指针)

边界半径应该剪辑内容吗?

Highcharts 图表选项 backgroundColor:'transparent' 在 IE 8 上显示黑色

空的 iframe src 是否有效?

了解 Bootstrap 3 中的网格类( col-sm-# 和 col-lg-# )

CSS 否定伪类 :not() 用于父/祖先元素

React - 防止父子事件触发

如何在 CSS 中给出背景图像路径?

谷歌的无图像按钮