Developer Tools
Text Tools字体预览工具
使用自定义文本、大小、字重和颜色预览任意 Google 字体。即时生成 CSS 导入代码。免费在线字体预览工具。
热门字体
Style
Browser Support
Style Tags
216 fonts
实时预览
The quick brown fox jumps over the lazy dog
字体预览
字体名称：Roboto
字体大小:32px
字体字重:400
CSS 代码
font-family CSS：
font-family: 'Roboto', sans-serif;Google Fonts 导入 URL：
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');Full CSS snippet
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 32px;
color: #1e293b;
}相关工具
关于字体预览工具
工作原理
- 输入任意 Google Fonts 字体系列名称或从热门列表中选择
- 字体通过浏览器中的 Google Fonts API 动态加载
- 调整字重、大小、颜色和背景以找到理想配置
- 复制 CSS font-family 声明或导入 URL 以用于您的项目
- 在预设示例文本之间切换或输入自定义文本
常见使用场景
- 为新网页项目选择合适的字体
- 比较同一字体不同字重在各种尺寸下的效果
- 生成 Google 字体的正确 CSS 导入代码片段
- 无需离开浏览器即可向客户展示字体选择
- 检查数字和符号在数据密集型 UI 中的渲染效果
常见问题
什么是字体预览工具？
字体预览工具允许您加载任意 Google Fonts 字体系列，调整其字重、大小、颜色和背景，使用自定义文本预览，并复制 CSS 导入代码——全部在浏览器中完成，无需安装任何软件。
如何预览 Google 字体？
在搜索框中输入 Google 字体名称（例如 'Playfair Display'）并点击'加载字体'，或从热门字体列表中选择名称。
我可以使用任何 Google 字体吗？
是的。您可以输入 Google Fonts 上任何可用字体的确切名称。该工具会自动构建正确的 API URL 并加载所有可用字重（100–900）。
支持哪些字体字重？
该工具从 Google Fonts 请求 100 到 900 的字重。如果某字体不包含特定字重，浏览器将渲染最接近的可用字重。
如何复制项目的 CSS 代码？
字体加载后，滚动到右侧面板的 CSS 代码部分。使用每个代码片段旁边的复制按钮来复制 font-family 声明、@import URL 或完整的 CSS 代码块。
有哪些示例文本可用？
提供六个预设：全字母句、字母表、数字和符号、Lorem Ipsum、标题示例和段落示例。您也可以在自定义文本字段中输入自己的文本。
此工具会存储数据吗？
不会。字体预览工具完全基于浏览器运行。它通过公共 Google Fonts API 加载字体，不在任何服务器上存储任何内容。
我可以更改文本颜色和背景吗？
可以。使用颜色部分中的颜色选择器为文本和预览背景选择任意十六进制颜色。这有助于检查对比度。
为什么字体加载失败？
如果字体名称拼写错误、字体已从 Google Fonts 中删除，或您的网络阻止了对 fonts.googleapis.com 的请求，字体加载可能会失败。
这个工具是免费的吗？
是的，字体预览工具完全免费。字体由 Google Fonts CDN 在开源许可证下提供——在商业项目中使用前请在 fonts.google.com 查看每种字体的许可证。
我可以并排比较多种字体吗？
您可以通过点击热门字体标签快速切换字体。如需正式的并排比较，请在两个浏览器标签中打开该工具，分别加载不同的字体。
什么是 CSS font-family 声明？
CSS font-family 声明告诉浏览器使用哪种字体，并提供备用选项。示例：font-family: 'Roboto', sans-serif;