自托管的 FontAwesome 图标未在 OS X Sierra 上呈现

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;
}

如您所见，字体文件的路径是根相对路径，我可以通过这些 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 构建中不起作用。

自托管的 FontAwesome 图标未在 OS X Sierra 上呈现

Self-Hosted FontAwesome Icons Not Rendering on OS X Sierra

css

webfonts

font-awesome

macos-sierra