Question

对于我的生活，我无法在Angular 2应用程序中使用自托管的FontAwesome图标进行渲染。

这些字体的我的目录结构是：

/src/assets/app/fonts/font-awesome/4.7.0/

WebPack在本地提供网站时使用/src/作为根。

为了减少我的应用中的http请求，我在index.html文件中内联了缩小的FontAwesome css，并在index.html中指定了@font-face：

@font-face{
  font-family: 'FontAwesome';
  src: local('FontAwesome'),
    url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.eot?v=4.7.0') format('embedded-opentype'),
    url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
    url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
    url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.woff?v=4.7.0') format('woff'),
    url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
    url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.svg?v=4.7.0#FontAwesome') format('svg');
  font-style: normal;
  font-weight: normal;
}

正如您所看到的，字体文件的路径是root相对的，我可以直接通过这些URL下载各个字体文件，所以我很确定这不是路径问题。

在OS X上的Chrome中，我得到了正方形。在Safari中，我根本没有任何图标。我已经梳理了大量文章，很多人遇到了与我类似的各种问题，但到目前为止没有任何帮助。

即使我为字体提供了特定的加载器：

{
  test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?$/,
  use: ['url']
}

它仍然不起作用。在Windows 8.1 / 10和Linux（Ubuntu / Mint）上，一切都按预期工作。我做错了什么？

Answer 1

我最终使用基于CDN的Font Awesome版本，因为自托管不在OS X或我的应用程序的Cordova版本中工作。

OS X Sierra上自托管FontAwesome图标无法渲染

1 个答案: