在 BEST Performance 中包含 Font-Awesome 的最佳实践

Best Practice to include Font-Awesome at BEST Performance

我通过包含这个 CDN 在我的项目中使用了 font-awesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Google Page Speed好像不太喜欢。

不说了,我只用了5个图标

view-source:https://www.bunlongheng.com/

通过在互联网上的快速搜索,我担心 font awesome 没有任何您正在寻找的服务:(但是有一些解决方案!

如果您使用的是像 React、Vue 或 Angular 这样的框架,您可以只导入您需要的字体

点赞^

如果您使用的是 vanilla javascript,您将不得不使用其他网站来帮助您

https://icomoon.io/app

https://fontello.com/

A font is a single file, much like an image or a document. It doesn't matter how you include it in your CSS -- users will still download the whole font file. The CSS definitions just make the font available on your web site.

There are some things that you could do as an alternative. There are some companies that will allow you to generate partial font sets using custom applications (like https://icomoon.io/, for example). That might suit your needs. But, once you create a custom version of their fonts it's still a file that you can't break up. Still, a custom version of icomoon can be very small and streamlined and would likely fit the scenario you describe.

Another alternative would be to not host the font yourself but use cloud-based fonts that are more likely to be cached by your users. It's not a solution per se but would increase the chances somewhat that your users wouldn't have to download the fonts specifically for your site.

Blockquote

还有一种方法是将svg文件下载到js文件中,然后导入,但也比较复杂,所以我认为最快的方法是使用开头提到的网站