Ke's blog
·
什么！一个项目给了8个字体包？？？
💡
原文中文，约2500字，阅读约需6分钟。
📝
内容提要
在新项目中，设计了统一的字体包，根据语言和字宽自动选择字体包，通过设置unicode-range属性优化字体加载和页面渲染性能，使用Figma样式避免手动改动，解决字宽和语言问题，按需下载字体包。
🎯
关键要点
-
在新项目中设计了统一的字体包，按需引入。
-
不同语言和字宽使用不同的字体包，共有8个字体包。
-
设计图以字体A为准，CSS代码中字体名称均为A。
-
使用CSS的@font-face定义字体，解决不同粗细字体包的问题。
-
通过font-weight属性设置字体宽度，确保不同粗细使用不同字体包。
-
使用unicode-range属性优化字体加载和页面渲染性能。
-
根据阿拉伯语的unicode范围设置字体，确保自动下载相应字体包。
-
实现了按需下载字体包，不使用时不下载，节省带宽。
-
Figma中生成的样式代码可直接使用，无需手动修改。
➡️
