css 为什么材料符号字体加载需要这么长时间,如何优化它?

wdebmtf2  于 2023-05-30  发布在  其他
关注(0)|答案(1)|浏览(329)

现在我正在为我的网站使用材料符号。效果很好!它很漂亮,易于使用,并且与我的设计配合得很好。然而,我注意到它需要很长时间才能加载。一旦***2.7 MB***文件完成加载并缓存,网站加载速度很快。我正在使用CSS导入加载文件:

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

但是使用HTML标签加载仍然非常慢。在快速3G预设中加载这2.7 MB需要***30秒***。其他字体(也使用CSS导入)最多需要500 ms加载(在相同的3G预设下)。为什么加载材料符号需要这么长时间?我能做什么呢?我肯定我不需要所有这些图标,那么我怎么能只加载我需要的图标呢?或者这是正常的?
我试着用其他方式导入CSS文件,比如HTML标签,使用JS导入,甚至使用静态图标字体,而不是可变字体。但还是要花很多时间。其他字体曾经有这个问题,我通过删除斜体解决了这个问题,因为我没有使用它们。这似乎解决了这个问题。但是,AFAIK不能对“材质符号”字体执行类似的操作。

eqqqjvef

eqqqjvef1#

尝试使用而< link >不是@import或者,选择任何其他图标库,如Bootstrap,Fontawesome或Flaticon

相关问题