无需登录 数据私有 本地保存

Web 字体测试小书签 - 在任意页面预览 Google Fonts

31
0
0
0

Google Fonts 字体测试小书签

生成一个 Bookmarklet,在任意网页上点击即可实时预览 Google Fonts 字体效果。无需修改代码,一键切换,再次点击恢复。

配置字体参数
输入 Google Fonts 中的字体名称,空格会自动处理。浏览字体库
🔥 热门英文字体:
Roboto Open Sans Lato Montserrat Poppins Inter Nunito Source Sans 3
🇨🇳 中文字体:
Noto Sans SC Noto Serif SC ZCOOL XiaoWei Ma Shan Zheng Zhi Mang Xing LXGW WenKai
300 Light 400 Regular 500 Medium 700 Bold 900 Black
建议选择 1-3 个字重,过多的字重会增加加载时间。
(会增加约一倍的加载体积)
实时预览
32px

The quick brown fox jumps over the lazy dog.

0123456789 · ABCDEFGHIJKLMNOPQRSTUVWXYZ

天地玄黄,宇宙洪荒。日月盈昃,辰宿列张。寒来暑往,秋收冬藏。

你的小书签

拖拽下方按钮到浏览器书签栏,或复制代码手动创建书签。

拖拽上方按钮到书签栏 / 收藏夹栏
使用步骤
1
在左侧配置字体参数——输入 Google Fonts 字体名称、选择字重。
2
拖拽橙色书签按钮到浏览器的书签栏(收藏夹栏)。
3
打开任意目标网页,点击书签栏中的该书签。
4
页面字体立即切换!再次点击书签即可恢复原始字体。
💡
移动端浏览器可能不支持书签栏,请使用复制代码功能手动创建。

常见问题 FAQ

Bookmarklet 是一种特殊的浏览器书签,它存储的不是网址而是一段 JavaScript 代码。点击书签时,浏览器会在当前页面执行这段代码。我们的工具将"加载 Google Fonts 并应用到页面"的逻辑封装成 Bookmarklet,让你无需安装任何插件就能在任意网页上测试字体效果。

可能的原因:
1. Google Fonts 服务不可达——在中国大陆等地区,Google 服务可能被限制访问,导致字体文件无法加载。建议使用 VPN 或代理后重试。
2. CSP(内容安全策略)限制——部分网站设置了严格的 CSP 策略,禁止加载外部样式表。这种情况下 Bookmarklet 无法注入字体。
3. 字体名称错误——请确保输入的字体名称与 Google Fonts 上的名称完全一致(注意大小写和空格)。
4. 浏览器兼容性——极少数旧版浏览器可能不完全支持。

Google Fonts 的官方服务器(fonts.googleapis.com 和 fonts.gstatic.com)在中国大陆通常无法直接访问。不过有一些替代方案:
• 使用国内 CDN 镜像(如 fonts.googleapis.cn,但稳定性不保证)
• 将字体文件下载到本地服务器使用
• 使用其他国内可用的字体服务(如字节跳动的「字体」服务)
本工具生成的 Bookmarklet 使用官方 Google Fonts URL,如果你在国内使用,建议配合代理或 VPN。

完全安全。Bookmarklet 只在当前浏览的页面临时生效:
• 它只修改页面的字体样式(font-family),不改变任何数据
• 效果是临时的——刷新页面后一切恢复原状
• 再次点击书签即可恢复原始字体并清理注入的资源
• 不会收集任何个人信息
• 所有代码都可以通过「查看源码」按钮审查

移动端浏览器通常不支持拖拽书签。你可以:
1. 点击「复制书签代码」按钮
2. 在浏览器中手动创建一个新书签
3. 将复制的代码粘贴到书签的 URL/地址字段中
4. 保存后即可在任意页面使用

注意:iOS Safari 的书签管理在「分享 → 添加书签 → 编辑」中;Chrome Android 在「⋮ → 书签 → +」中。

如果网站使用图标字体(如 Font Awesome、Material Icons),这些图标依赖于特定的字体文件。当 Bookmarklet 修改了全局字体后,图标可能会显示为乱码(方框)。这是因为图标字体的字符被当作普通文本渲染了。

我们的 Bookmarklet 已经尽量优化——主要修改 body 层级的字体,并保留 fallback。但某些网站在元素级别硬编码了字体,可能会有轻微影响。再次点击书签即可恢复。

每个 Bookmarklet 绑定一个 Google Fonts 字体。如果你想对比多个字体,可以:
• 为每个字体生成一个独立的 Bookmarklet,分别拖到书签栏
• 在目标页面上依次点击不同的书签来切换对比
• 书签名称可以自定义(如「字体-Roboto」「字体-OpenSans」),方便区分

字体名称需要与 Google Fonts 上的名称完全一致
• 空格保留(工具会自动处理 URL 编码),如 Open SansNoto Sans SC
• 大小写敏感,如 Roboto 不能写成 roboto
• 多词字体名用空格分隔,如 Source Sans 3DM Serif Display
• 不确定名称?访问 fonts.google.com 搜索确认

字重数字表示笔画的粗细程度:
100 - Thin(极细)
300 - Light(细体)
400 - Regular/Normal(常规,默认)
500 - Medium(中等)
700 - Bold(粗体,常用标题)
900 - Black(极粗)

并非所有 Google Fonts 都支持全部字重。如果选择了字体不支持的字重,浏览器会自动使用最接近的可用字重。

完全不需要安装任何软件或插件。Bookmarklet 只是一段 JavaScript 代码,存储在书签中。你可以点击「查看 Bookmarklet 源码」来审查全部代码。欢迎自由使用、修改和分享。

相关知识点

Google Fonts

Google 提供的免费开源字体库,包含超过 1500 种字体,支持全球多种语言。通过 CDN 加速分发,是全球最流行的网页字体服务。

@font-face

CSS 规则,用于在网页中加载自定义字体。Google Fonts 本质上是通过 @font-face 将字体文件引入页面,Bookmarklet 模拟了这一过程。

CSP 策略

内容安全策略(Content-Security-Policy)是一种安全机制。部分网站限制外部资源加载,可能导致 Bookmarklet 无法正常工作。