安装ParcelJS后@ font-face无法正常工作

时间:2018-03-15 16:37:56

标签: html css sass font-face parceljs

我之前设置Gulp使用Sass,Pug和Babel。字体加载很好。我现在切换到使用Parcel并按预期工作,除了一件事。字体没有加载。

以下是_fonts.sass的全部内容:

@font-face
  font-family: "MyWebFont"
  src: url(../fonts/economica-regular-otf.eot)
  src: url(../fonts/economica-regular-otf.eot?#iefix) format("embedded-opentype"),
  url(../fonts/economica-regular-otf.woff2) format("woff2"),
  url(../fonts/economica-regular-otf.woff) format("woff"),
  url(../fonts/economica-regular-otf.ttf) format("ttf")

@font-face
  font-family: "MyWebFontBold"
  src: url(../fonts/economica-bold-otf.eot)
  src: url(../fonts/economica-bold-otf.eot?#iefix) format("embedded-opentype"),
  url(../fonts/economica-bold-otf.woff2) format("woff2"),
  url(../fonts/economica-bold-otf.woff) format("woff"),
  url(../fonts/economica-bold-otf.ttf) format("ttf")

body
  font-family: 'MyWebFont', 'Titillium Web', sans-serif
  text-rendering: auto
  text-rendering: geometricPrecision

文件夹结构如下:

/dist
/src
-- / pug
--- index.pug
-- / sass
--- _fonts.sass
--- _animations.sass
--- _blocks.sass
--- _elements.sass
--- styles.sass
-- / js
--- // all the scripts
-- / fonts
--- // all the fonts are here

您可以在此处找到项目文件(' new'分支):GitHub

1 个答案:

答案 0 :(得分:1)

我稍后解决了这个问题。

package.json中,我将build脚本编辑为"build": "parcel build src/pug/index.pug --public-url ./ -d dist"

然后我编辑了_fonts.sass,所以@font-face不在目录中。例如,src: url(../fonts/economica-regular-otf.eot)变成了src: url(./fonts/economica-regular-otf.eot)

自从我弄清楚这已经有一段时间了,所以我不记得它背后的原因了,但是它起作用了。