前端优化之-字体按需加载

今天发现项目里有一处，几个字用了特别的字体，就想着开始优化。

然后发现网友的话： 把中文字体切割成很多份，然后按需加载，于是我就开始查看这个项目里的引用。

@font-face { font-family: 'Love Ya Like A Sister'; font-style: bold; font-weight: 400; font-display: swap; src: url(fonts.gstatic.com/s/loveyalik…) format('woff2'); unicode-range: U+0020, U+0021, U+0026, U+0027, U+002C, U+002E, U+0030-0039, U+0041-005A, U+0061-007A; }

@import url('https://fonts.googleapis.com/css2?family=Love+Ya+Like+A+Sister&family=Ma+Shan+Zheng&display=swap');

于是我就进去看了源代码：

@font-face {
  font-family: 'Love Ya Like A Sister';
  font-style: bold;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/loveyalikeasister/v16/R70EjzUBlOqPeouhFDfR80-0FhOqJubN-BeL9Xxd.woff2)
    format('woff2');
  unicode-range: U+0020, U+0021, U+0026, U+0027, U+002C, U+002E, U+0030-0039, U+0041-005A, U+0061-007A;
}

嗯，确实是按照unicode-range来加载对应的字体的，英文没有分割，就一份加载的woff2 但是中文有对应100+份，于是我就查找到这些中文字体的unicode想要自己加载对应的文件，避免下载这100+的文件（一开始我认为会下载100+份文件。我没有看网络） 然后我就找出了其中的五份，放了进去开始查看网络加载资源和时间。

然后我就发现。。。。。竟然没有区别。 于是经过查找，得到了下面的结论：

@import url('[https://fonts.googleapis.com/css2?family=Love+Ya+Like+A+Sister&family=Ma+Shan+Zheng&display=swap');](https://fonts.googleapis.com/css2?family=Love+Ya+Like+A+Sister&family=Ma+Shan+Zheng&display=swap%27);) 

它会根据字体自动下载对应的包而不会全部下载是吗?

是的，当您在CSS中使用@import语句引入字体时，浏览器会根据需要自动下载相应的字体包，而不是一次性下载所有字体包。这样可以减少加载时间和带宽使用。

没错，浏览器已经可以自己根据需要下载对应的字体包了，而不是一次性下载所有的字体包。

思考： 如果还想在中文字体上更快，那就是学习B站，自己去按照需求切字体，针对性的切包，可以更快。