目前尚不清楚从@ 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文件没有被缩小并且没有得到哈希.因此,对于最终用户来说,它会变得更慢,并且您冒着浏览器缓存旧版本文件的风险.
使用哪种方式？
使用第一种方法(“使用导入”).我只描述了第二个,因为那是你试图做的事情(根据你的评论判断),但它有很多问题,应该只是你在处理某个问题时的最后手段.
