在我的一生中，我无法在我的 Angular 2 应用程序中获得自托管的 FontAwesome 图标。
我这些字体的目录结构是：
/src/assets/app/fonts/font-awesome/4.7.0/
/src/在本地为站点提供服务时，WebPack用作根。
为了减少我的应用程序中的 http 请求，我在我的 index.html 文件中内联了缩小的 FontAwesome css，并@font-face在 index.html 中指定了这样的内容：
@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) 上，一切正常。我究竟做错了什么？
我最终使用了基于 CDN 的 Font Awesome 版本，因为自托管在 OS X 或我的应用程序的 Cordova 版本中不起作用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句