谷歌字体预览 使用可自定义的文本、大小、粗细和字母间距来预览谷歌字体。
谷歌字体预览
使用可自定义的文本、大小、粗细和字母间距来预览谷歌字体。
浏览或搜索字体
在30种流行的Google Fonts中搜索，或浏览完整列表。
自定义预览
设置示例文本、字体大小、粗细、字母间距和行高。
复制CSS代码
预览不同粗细的字体并复制@import和CSS代码。
What Is 谷歌字体预览?
Google 字体预览工具允许您探索和预览流行的 Google 字体，并提供全面的排版控制。Google 字体为网页优化，提供数百种免费、开源字体。本工具收录了 30 种最受欢迎的字体，您可以通过名称进行搜索。对于每种字体，您都可以使用自定义样本文本预览，并调整字体大小、粗细（100-900）、字母间距和行高。多重粗细预览功能可以同时显示不同粗细的字体，帮助您评估其通用性。生成的 CSS 包括 Google 字体的 @import URL 和 font-family 声明，包含大小、粗细、间距和行高属性。在项目中使用字体之前，本工具对于评估字体至关重要。
Why Use 谷歌字体预览?
-
30种流行的Google Fonts，带有搜索筛选功能
-
完整的排版控制：大小、粗细、间距、行高
-
多重粗细预览可以一眼看到字体的多样性
-
完整的CSS输出，包括@import URL和声明
Common Use Cases
字体选择
在为网页项目选择字体之前评估和比较不同字体。
排版测试
以特定的大小和粗细测试字体，用于设计原型。
品牌字体探索
为品牌身份和营销材料探索字体选项。
开发者参考
快速预览并获取CSS代码，用于开发过程中的字体。
Technical Guide
Google 字体通过 CDN 提供字体文件，并自动选择合适的格式（现代浏览器使用 woff2）。@import 方法通过 CSS 添加字体：@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); family 参数指定了字体和粗细。display=swap 参数使用 font-display: swap 实现立即显示文本，并在网页字体加载时提供回退字体。多个字体通过 &family= 参数分隔。为了提高性能，请仅请求需要的粗细。可变字体（许多 Google 字体都支持）可以使用 wght@100..900 语法在单个文件中提供所有粗细。字体子集化还可以进一步减少文件大小，只加载所需的字符范围：&text=Hello 或 subset=latin 参数。请使用 font-family 属性并指定回退字体：font-family: 'Inter', system-ui, sans-serif。
Tips & Best Practices
-
1仅请求实际使用的字体粗细，以提高性能
-
2使用font-display: swap防止文本在加载期间不可见
-
3使用实际内容测试字体，而不是仅使用Lorem Ipsum
-
4考虑使用可变字体以获得单个文件中最大程度的重量灵活性
Related Tools
Frequently Asked Questions
Q Google Fonts是否免费？
Q 如何将Google Fonts添加到我的项目中？
Q Google Fonts是否会影响页面速度？
Q 什么是font-display: swap？
Q 我可以自托管Google Fonts吗？
About This Tool
谷歌字体预览 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.