字体透镜

选中任意文本并右键，即可轻松识别其字体、字号、字重、颜色及CSS样式——支持复制、调整、预览和下载。

您是否曾经在浏览某个网页时，被其上优雅独特的排版艺术所深深吸引，心中不禁涌现出一个疑问：“这究竟用的是什么字体？”字体透镜将为您轻松解答这个疑惑，整个过程仅需一次鼠标点击即可完成。您只需在任何网站上选中任意文本，然后通过鼠标右键菜单选择“使用字体透镜检查字体”。一个界面清爽、功能专注的面板便会直接覆盖在当前页面上，精准地为您揭示该文本的所有样式细节：包括其所使用的字体家族、具体的字号大小、字重、行高、颜色，以及设计背后所有其他的精细设定。无论您是一位需要逆向工程分析页面布局的资深设计师，一名需要严格匹配设计规范的前端开发者，或仅仅是一位对某个引人注目的漂亮标题感到好奇的普通用户，这款强大的工具都能将任何网页瞬间变成一本可以随意翻阅的字体排印百科全书。 字体透镜是一款集成了字体识别器与 CSS 检查器于一体的高效工具。它所做的远不止是告诉您字体的名称（font-family），而是会进一步为您提供即取即用的代码、一个可以自由测试各种想法的交互式演练场，以及一系列确保文本清晰易读的专业辅助功能工具。完全无需注册账户，也无需任何繁琐的登录步骤。您所要做的，仅仅是选中目标文本、点击右键，然后开始您的检查之旅。 🔍 您可以做什么 - 一目了然地揭示所选文字的完整排印信息：包括字体家族 (font-family)、字号 (font-size)、字重 (font-weight)、行高 (line-height) 以及具体的颜色值。 - 深入查看那些通常容易被忽略的额外样式信息，例如字间距 (letter-spacing)、文本大小写转换 (text-transform) 和字体样式 (font-style)。 - 只需单击一次即可复制任何单一属性，或者将整个规则集作为一份完整的 CSS 代码片段全部获取。 - 通过简单直观的标签页，将获取的 CSS 代码片段轻松转换为 Tailwind、SCSS 或 SASS 格式，然后可以整块复制或逐行进行复制。 - 在一个实时的、完全可编辑的预览窗口中尽情实验：您可以重写示例文本，微调各项数值，更换背景颜色，并即时观察所有变更带来的视觉效果。 - 通过清晰的提供商标示，快速识别出网络字体的具体来源，例如是来自谷歌字体 (Google Fonts)、Adobe 字体 (Adobe Fonts)，还是由网站自托管，抑或是系统内置的本地字体。 - 使用“下载字体”按钮，将您感兴趣的网络字体直接从其源文件地址拉取并完整地保存到您的本地计算机上。 - 根据国际通用的 WCAG 标准来严格检查颜色对比度，并获取精确的对比度比率，以及 AA 和 AAA 合规级别的明确通过或失败结果。 - 使用功能齐全的颜色选择器来挑选和采样颜色，该选择器还包含一个强大的屏幕取色器，可以精准抓取屏幕上任何一个像素的颜色。 - 在像素 (px)、相对单位 (rem)、磅 (pt) 和父元素相对单位 (em) 之间灵活切换测量单位，您所做的选择将同时应用于显示字段和最终导出的代码。 🖱️ 工作原理 使用字体透镜的过程非常快捷，通常只需要几秒钟。首先高亮您想要研究的文字部分，接着在所选内容上点击鼠标右键，然后从弹出的菜单中选择“使用字体透镜检查字体”。检查面板会优雅地出现在当前页面之上，其界面样式经过精心设计，确保绝不会与网站本身的外观设计产生任何冲突。在此面板中，您可以轻松地阅读所有详细信息，复制您需要的数据，或者立即开始进行编辑和调整。 当您使用实时预览功能时，事情会变得更加充满乐趣和创造性。您可以更改示例文字，用以测试一个真实的标题内容；也可以细微地调整字号大小，改变字重，或者设置一个全新的背景颜色，来观察字体在不同环境下的实际表现。您的所有编辑都会被自动保存，即使您在不同页面间切换，或稍后再次返回，这些改动依然存在。因此，您在一个网站上萌生的设计灵感，可以在访问下一个网站时无缝衔接并继续探索。当您希望恢复到原始设定时，只需点击“重置为网站设置”按钮，即可一键还原页面实际所使用的全部默认样式。 如果您需要获取字体的原始资源文件，也同样简单。对于一个可供下载的网络字体，只需一个按钮，工具便会从其 @font-face 声明的位置为您获取真实的字体文件。而对于那些您操作系统已经附带的字体，字体透镜则会明确告知您这是一个内置字体，这样您就能清楚地知道，它无需任何下载操作即可在您的系统上直接使用。 🔒 隐私优先 字体透镜的所有功能都完全在您的浏览器内部本地运行。在您检查文本的整个过程中，我们承诺不涉及任何形式的数据收集、用户行为跟踪、性能分析，也绝不会与任何外部服务器进行数据交换。您所检查的一切内容都将严格地保留在您自己的计算机上。该扩展程序仅在一种情况下会发起网络请求——那就是当您主动按下“下载字体”按钮时，此时它会直接连接到该字体的官方源地址，以便为您检索并下载文件。除此之外，再无任何数据会离开您的设备。 我们对扩展所需的权限进行了刻意的、严格的限制。其中，“上下文菜单”权限是为了在右键菜单中添加功能入口；“活动标签页”权限则允许该工具在您主动调用它的那个标签页上读取您所选择的文本，而绝对不会访问其他任何页面。我们申请“存储”权限的目的，是为了记住您的预览文本内容以及您偏好的单位和格式设置，方便您下次使用。本工具绝不会广泛地访问您的浏览历史记录，也未申请任何宽泛的主机权限，最大限度地保障您的隐私安全。 👥 适用人群 - 网页设计师：希望能够快速识别出网页上的心仪字体、捕捉并记录配色方案，以及高效复用各种优秀样式。 - 前端开发者：需要严格按照设计稿进行开发，或者需要将精确的字体家族和间距数值应用到实际代码中。 - UI 和 UX 工程师：致力于构建高度一致、并且完全符合品牌形象规范的专业字体系统。 - 相关专业的学生：正在学习 CSS 和字体排印知识，希望通过观察和分析真实网站的构建方式来加深理解。 - 辅助功能审查员：在产品发布或上线前，负责验证所有文本内容是否满足 WCAG 对比度的合规性要求。 - 博主、内容创作者和营销人员：以及所有对字体充满好奇心的读者，仅仅是想知道某个网站究竟使用了哪种字体。 ✨ 备受青睐的原因 - 无需深入挖掘复杂的开发者工具，只需简单的一次右键点击，即可轻松获得您想要的答案。 - 生成的代码可以直接复制使用，全面支持原生 CSS、Tailwind、SCSS 或 SASS 等多种格式，可无缝集成到您的项目中。 - 强大且可编辑的预览功能，让您无需编写或修改一行代码，即可对各种字体方案进行快速的原型设计和验证。 - 内置的对比度检查器将辅助功能验证无缝融入您的日常工作流程，而不是将其作为一个容易被忽略的、需要事后补救的环节。 - 方便的颜色选择器和屏幕取色器工具，意味着您可以从页面的任何地方轻松采样并复用精确的颜色值。 - 提供浅色和深色两种主题模式，并能自动跟随您的操作系统设置进行切换，无论白天还是夜晚，都能提供舒适自然的视觉体验。 - 支持在 px、rem、pt 和 em 等多种CSS单位之间自由切换，确保最终输出的代码与您现有代码库的书写规范和风格保持完全一致。 🎨 深入了解细节 优秀的字体排印设计远不止是选择一个字体名称那么简单。字体透镜能够帮助您揭示那些让文本感觉“恰到好处”的微小设计决策，从一个标题所使用的具体字重，到一行文字所拥有的呼吸感（即行高），再到字母之间微妙的间距调整（即字间距）。将这些数值并排查看，有助于您深入理解一个设计为何能够成功，以及如何才能准确地复刻它。此外，提供商标示也为您增添了宝贵的上下文信息，让您仅需一瞥便能分辨出当前查看的是谷歌字体资源、Adobe 字体、网站自托管的文件，还是系统自带的默认字体——这往往是您着手匹配或寻找某个特定字体时的第一条重要线索。 我们的颜色工具所提供的功能也远超一个静态的数值读数。内置的颜色选择器提供了一个直观的 HSV 方块，并配有色相和透明度滑块，同时还全面支持 HEX、RGB 和 HSL 等多种颜色格式，因此您可以选择任何您习惯的方式来处理颜色。将此功能与屏幕取色器相结合，您便可以轻而易举地从屏幕上任何元素提取出其精确的色值，并将其应用到您的预览中或保存到笔记里。 🚀 开始检查 立即添加字体透镜到您的浏览器，高亮显示一些您感兴趣的文字，然后点击鼠标右键，即可开始揭示任何网页背后隐藏的字体排印、精美样式和缤纷色彩。对于任何一位关心网络阅读体验的用户来说，它都将是一个运行快速、注重隐私且真正实用的得力伴侣。现在就安装它，让它成为您工具箱中的常备利器，从此再也不必为一个未知的神秘字体而感到困惑。