从blob_loaded样式表中加载本地Web字体

Question

我有一个由 WebPack 生成的样式表:

@font-face {
  font-family: 'SDC';
  src: url(/fonts/SDC.a1b82464f8ecd3973123e2140c30df02.ttf) format('truetype'), url(/fonts/SDC.af547e8d2b07993c0bc865d8c3746ac0.woff) format('woff'), url(/f68efdf3530391386b071febbff0eae2.svg#SDC) format('svg');
  font-weight: normal;
  font-style: normal;
}

我的应用中使用如下方式加载：

<link rel="stylesheet" href="blob:http%3A//localhost%3A3000/4ed04ef3-1133-417b-abe4-78501ac193e0">

问题在于字体无法加载。我认为问题出在 blob url 上，这会破坏相对路径。

有什么建议吗？

- Fez Vrasta

Answer 1

这个问题在 style-loader 的 README 中有所描述:

关于源映射和使用 url 引用的资源: 当 style loader 使用 ?sourceMap 选项时，CSS 模块将被生成为 Blob，因此相对路径不起作用（它们将相对于 chrome:blob 或 chrome:devtools）。为了使资源路径保持正确，必须设置 webpack 配置的 output.publicPath 属性，以便生成绝对路径。

在你的 WebPack 配置中，定义 output.publicPath 指向你的本地服务器 (例如: http://localhost:3000/)。

这样应该像这样:

output: {
  filename: '[name].js',
  publicPath: 'http://localhost:3000/',
},

现在，所有相对URL都将被转换为绝对URL，使它们可以在blob协议加载时正常工作。

您的CSS现在将是：

@font-face {
  font-family: 'SDC';
  src: url(http://localhost:3000//fonts/SDC.a1b82464f8ecd3973123e2140c30df02.ttf) format('truetype'), url(http://localhost:3000//fonts/SDC.af547e8d2b07993c0bc865d8c3746ac0.woff) format('woff'), url(http://localhost:3000//f68efdf3530391386b071febbff0eae2.svg#SDC) format('svg');
  font-weight: normal;
  font-style: normal;
}

- Fez Vrasta