使用教程
本字体预览工具操作简单，以下是详细的使用指南：
搜索字体：在搜索框中输入字体名称（如"Roboto"）或关键词（如"serif"、"中文"），工具会实时筛选匹配的字体。支持中英文搜索。
分类筛选：通过分类下拉菜单，可以按字体类型筛选：无衬线体（Sans Serif）、衬线体（Serif）、展示字体（Display）、手写体（Handwriting）和等宽字体（Monospace）。
自定义预览：在预览文本框中输入你想测试的文字内容，调整字号滑块和字重选择，所有字体卡片会实时更新显示效果。
获取代码：点击任意字体卡片选中后，下方会自动生成该字体的CSS引入代码，包括@import语句和font-family声明，一键复制即可使用。
应用场景
网页设计：在开始网页设计前，使用字体预览器对比不同字体的显示效果，选择最适合项目风格的字体组合。好的字体选择直接影响用户体验和品牌形象。
品牌设计：为品牌选择主字体和辅助字体时，需要在不同文本内容、不同字号下预览效果。本工具支持自定义预览文本，方便测试品牌名称、标语等关键文案。
前端开发：开发者可以直接获取字体的CSS代码，无需手动查找字体名称和引入方式。生成的代码包含完整的引入语句，直接粘贴到项目中即可使用。
扩展知识
Web字体发展：早期网页只能使用系统预装字体，选择非常有限。2010年Google Fonts推出后，Web字体变得免费且易用。如今Google Fonts拥有1500+字体家族，月访问量超过数十亿次。
字体加载优化：使用Web字体时需注意性能优化。推荐使用font-display: swap确保文字始终可见；使用preconnect预连接字体CDN；只引入实际使用的字重和子集，减少下载量。
字体搭配原则：经典搭配是衬线体+无衬线体组合，如标题用衬线体（如Merriweather），正文用无衬线体（如Open Sans）。同类型字体搭配时，选择特征差异明显的组合效果更好。
常见问题 FAQ
字体预览器支持哪些字体？
支持Google Fonts全部1500+字体，包括思源黑体、思源宋体、Roboto、Open Sans、Lato、Montserrat等热门字体，以及各类手写体、展示字体和等宽字体。
字体加载速度慢怎么办？
字体从Google CDN加载，首次使用需下载字体文件。建议按分类筛选缩小范围，或使用搜索功能直接查找目标字体。已加载的字体会被浏览器缓存。
如何获取字体的CSS代码？
选择字体后，工具自动生成完整的CSS代码，包括@import引入语句和font-family声明。点击复制按钮即可一键复制，直接粘贴到项目中使用。
支持中文字体吗？
支持。Google Fonts包含多款中文字体，如Noto Sans SC（思源黑体）、Noto Serif SC（思源宋体）、Noto Sans TC等。在搜索框输入中文即可筛选。
数据会上传到服务器吗？
不会。所有预览和代码生成都在浏览器本地完成，仅字体文件从Google CDN加载，不涉及任何数据上传。