字体漫谈-网站字体最佳实践
内容提要
文章探讨网站字体选择与加载优化，涵盖字体基础、分类（衬线/无衬线、等宽）及系统默认字体差异。建议个人网站显式声明字体族，区分中西文和场景（技术用无衬线、文学用衬线、代码用等宽），并推荐本地化字体资源、使用CDN加速，设置font-display: swap以优化加载体验，避免白屏问题。
延伸解读
字体加载策略的权衡
文章指出，虽然Google Fonts提供了便捷的托管服务，但中文字体被拆分为多个切片，导致大量请求和内容错位问题。同时，国内访问Google域名不稳定，因此作者最终选择本地化字体并配合CDN加速。这提醒我们，在选用第三方字体服务时，需综合考虑加载性能、网络环境和用户体验，而非盲目追求便利。
font-display属性的实际影响
文章详细解释了font-display不同值对页面渲染的影响。默认的auto或block可能导致白屏（FOIT），而swap则先用回退字体显示，避免不可见文本，但可能造成内容跳动。作者推荐使用swap，并指出Google Fonts默认采用此设置。理解这些差异有助于开发者根据场景选择合适的策略，平衡加载速度与视觉稳定性。
中文字体选择的特殊性
文章强调，不同操作系统和浏览器对中文字体的默认回退差异显著，如Windows常用微软雅黑，macOS用苹方，Android用思源黑体。因此，显式声明font-family并考虑系统差异至关重要。此外，中文字体文件较大，本地化时需按需选择字符子集，并利用local()优先使用本地资源，以优化加载。
Q&A
网站字体最佳实践有哪些？
网站字体最佳实践包括：显式声明font-family，区分中西文和场景（技术用无衬线、文学用衬线、代码用等宽），使用本地化字体资源并CDN加速，设置font-display: swap以优化加载体验，避免白屏问题。
衬线字体和无衬线字体分别适合什么场景？
无衬线字体适合屏幕阅读和科技类文章，衬线字体更优雅，适合文学性文本和印刷效果。
为什么推荐使用font-display: swap？
font-display: swap会跳过block期，在目标字体加载完成前先用fallback字体渲染，避免白屏（FOIT），提升加载体验。
如何优化Google Fonts的加载速度？
优化步骤包括：预连接字体源、预加载字体CSS、异步加载字体CSS（media="print" onload）、noscript兜底。
为什么作者最终放弃了Google Fonts？
原因有两点：一是Google Fonts将中文字体拆成多个切片，导致大量请求和内容错位；二是国内访问Google域名不稳定，加载失败概率高。
如何实现字体本地化？
可以使用Google WebFont Helper按需下载字体，只选择需要的字符集（如简体中文），并在@font-face中设置font-display: swap，同时使用woff和woff2格式。
个人网站如何选择字体？
个人网站应显式声明font-family，区分场景：技术类文章用无衬线，文学类用衬线，代码用等宽。同时将西文字体放在中文前，并考虑系统版本和generic family兜底。
什么是FOIT和FOUT？
FOIT（Flash of Invisible Text）是字体加载完成前文本不可见，导致白屏；FOUT（Flash of Unstyled Text）是先用fallback字体渲染，字体加载后切换，导致样式闪烁。
