小编gre*_*enN的帖子

Webpack无法加载字体(ttf)

目前,我有3种字体要添加到我的React项目中:a,浅色,粗体。
我的文件结构:

/src
??? /fonts/
?   ??? /A.ttf
?   ??? /A-light.ttf
?   ??? /A-bold.ttf
?  
??? /styles/
?   ??? /base/
?   ?   ??? /__base.scss
?   ??? styles.scss
? 
??? app.jsx
??? webpack.config.js
Run Code Online (Sandbox Code Playgroud)

_base.scss:

@font-face {
  font-family: "A";
  font-style: normal;
  font-weight: 400;
  src: url("../../fonts/A.ttf") format("truetype");
}

@font-face {
  font-family: "A";
  font-style: normal;
  font-weight: 800;
  src: url("../../fonts/A-bold.ttf") format("truetype");
}
@font-face {
  font-family: "A";
  font-style: normal;
  font-weight: 300;
  src: url("../../fonts/A-light.ttf") format("truetype");
}
body {
  font-family: A, Helvetica, Arial, sans-serif;
}
Run Code Online (Sandbox Code Playgroud)

_base.scss由styles.scss导入,styles.scss由app.jsx导入。

我的webpack配置看起来像这样:
webpack.config.js …

fonts font-face reactjs webpack webpack-3

6
推荐指数
4
解决办法
5362
查看次数

标签 统计

font-face ×1

fonts ×1

reactjs ×1

webpack ×1

webpack-3 ×1