解析、编辑并生成 Google Fonts CSS2 链接、HTML preconnect 标签、@import、CSS 变量与 Tailwind 字体配置。
- 本地处理
- 分类 开发运维
- 适合 格式化、校验、压缩或检查和代码相关的文本。
Google Fonts CSS2 链接生成器
仅本地生成字符串, 工具本身不会请求 Google Fonts。字体族
摘要
CSS2 URL
https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lexend:wght@400;500;600;700;800&display=swap
HTML links
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lexend:wght@400;500;600;700;800&display=swap" rel="stylesheet">
CSS @import
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lexend:wght@400;500;600;700;800&display=swap');CSS 变量与使用示例
:root {
--font-inter: 'Inter', system-ui, sans-serif;
--font-lexend: 'Lexend', system-ui, sans-serif;
}
body {
font-family: var(--font-inter);
}
h1, h2, h3 {
font-family: var(--font-lexend);
font-weight: 800;
}Tailwind 配置
// tailwind.config.js
export default {
theme: {
extend: {
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
lexend: ['Lexend', 'system-ui', 'sans-serif'],
},
},
},
};这个工具能做什么
一个纯前端的 Google Fonts CSS2 链接生成器, 默认覆盖常见的 Inter + Lexend 嵌入链接, 也可以解析任意 fonts.googleapis.com/css2 URL。粘贴 URL 后可以检查字体族、字重、斜体轴、display 模式和可选 text 子集, 然后一键复制生产可用的 HTML link 标签、CSS @import、CSS 自定义变量 或 Tailwind fontFamily 配置。工具不会请求 Google Fonts, 只在本地解析 和生成字符串。
工具细节
- 输入
- 文本 + 数值 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 40 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 开发运维 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
Google Fonts CSS2 链接生成器 适合怎么用
适合穿插在写代码、查问题、做 Review、上线前的小任务里。
适合开发场景
- 格式化、校验、压缩或检查和代码相关的文本。
- 把片段整理好再放进文档、工单、提交或交接材料。
- 不切换工具,快速检查一个小 payload。
开发检查项
- 压缩、混淆这类不可逆处理,先对副本操作。
- 除非确认工具本地处理,不要粘贴密钥和敏感片段。
- 转换后的代码上线前,仍要跑自己的测试或 lint。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
上线前整理 Google Fonts 链接
设计师给你一条从 Google Fonts 复制出来的 Inter + Lexend 长链接。 粘贴到这里, 确认只保留需要的字重, 保持 `display=swap`, 再把 HTML preconnect 代码复制进页面 head。
把字体选择交付成 Tailwind token
品牌字体已经确定, 但工程侧需要 Tailwind 配置。编辑字体族和字重, 复制生成的 `fontFamily` 扩展, 再在布局里使用 `font-inter` 或 `font-lexend` 工具类。
常见踩坑
页面只用 400、600、700, 却把所有字重都加载进来。
明明能改页面 head, 生产环境还只用 `@import`。
忘记 `display=swap`, 导致字体下载期间文字可能不可见。
隐私说明
解析器完全在浏览器里运行。工具不会请求生成出来的 Google Fonts URL, 因此 text 子集或本地笔记里的私有项目名称不会被这个工具发送出去。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。