Question

我是Angular的新手。我已完成教程，现在正在构建我的第一个应用程序。

添加OTF文件可以正常工作，但是当我对app.component.css进行了更改并添加了：

@font-face { font-family: bookman; src: url('../../../BOOKOS.TTF'); }

当我添加此行时，我在浏览器中收到以下错误：

Failed to compile.

../BOOKOS.TTF
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./src/app/app.component.css 7:186-216
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

我做了一些研究，发现了几页：

Why does module parse failed: /xxx/MyFont.ttf Unexpected character ''

他们建议加上这个：

{
  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
  loader: 'file-loader?name=assets/[name].[hash].[ext]'
}

到我的webpack配置规则数组。

问题在于我不知道那是什么。看起来webpack可能是Angular正在使用的JS库，但我的目录结构中没有webpack的任何配置文件。

Answer 1

您必须为Angular创建自己的Webpack配置才能使用。检查Angular's documentation上的how to use with Webpack，然后按照您刚刚关联的文章中的方式或使用Angular's documentation (*loaders)添加文件加载器。

Answer 2

我没有正面解决问题，而是绕过了它。我使用https://everythingfonts.com/ttf-to-otf将我的TTF字体转换为OTF。请注意，这不适用于所有字体，但这是一个公共域，因此转换格式是可以的。

模块解析失败：将ttf添加到样式表时出现意外字符''（1：0）

2 个答案: