用于确定站点上使用的字体的实用程序？
Laz*_*zer 9 fonts software-rec website
例如：我喜欢网站上使用的字体 : NYTimes，所以可以列出网站使用的所有字体的东西会很棒！
我不想要一个可以分析屏幕截图的图像处理实用程序或一个会询问有关字体的问题并从其列表中缩小范围的站点。
可以抓取网站并列出其字体的东西......如果它可以覆盖区域上的字体会很棒，但我想这太过分了。
Max*_*sky 20
有多种方法可以实现这一点。我实际上经常这样做，因为我对 CSS 的工作原理非常感兴趣，而且我也喜欢排版。我喜欢这样做的两种方法是：
- 在浏览器中使用“检查器”（这就是您要找的东西！） - 我使用Google Chrome（因为我喜欢它），它有一个内置的检查器工具。你真的应该尝试一下。您只需转到一个站点，右键单击要分析的任何元素，然后从上下文菜单中单击“检查元素”。Inspector显示 HTML 和 CSS 的动态属性，因此如果您要检查文本元素，您会看到
font-familycss 属性在检查器中（在右侧栏中），它会告诉您字体是什么（有关如何解释此 CSS 的信息，请参见下文）。您可以使用 Firebug for Firefox 来完成类似的事情，但我相信 Google Chrome Inspector 工具要优越得多（我是一名网络开发人员 - 我用它做任何事情！）。 或者，您可以手动查看页面的来源并分析 CSS。这是如何做到的：
当您在页面上时，查看源代码。如果您使用的是 Internet Explorer，请转至页面 --> 查看源代码或查看 --> 源代码。如果您使用的是 Firefox、Chrome 或任何其他现代浏览器，请按 Ctrl+U（或 Apple+U，具体取决于您的操作系统）。
在 HTML 代码中，搜索您要分析的文本内容。您应该找到一些包含文本的标签，它们可能将字体硬编码到 HTML 中（使用
<font>标签或在stylea<p>或<div>外壳的属性中），或者它可能引用一些 CSS（查找 aclass或id属性，并写下这些）。如果是后者（它引用了一些 CSS），请转到 HTML 的顶部并在页面的 中找到
<link>标记<head>。如果链接引用了样式表，您将看到它 - 现在您要做的就是转到该 CSS 样式表并搜索您写下的类或 id 标识符。在某处，您会找到相应的font-family属性（不要忘记，您还可以在整个站点中全局设置字体，这将在<body>标签下或其他地方。这就是您应该使用检查器工具的原因，因为克服了这个困难）。
如何解释font-familycss：
该font-family属性将确定字体是什么。在此属性中，字体将用逗号分隔。渲染页面时，浏览器将查看此列表并使用计算机上的第一种字体。在许多情况下，此属性的末尾还有一个字体类别，它只是一个“以防万一”，以便在没有其他字体可用时使用该类别的默认字体。
一个例子：假设这是一个<p>外壳的css 。
p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}
在这里，如果字体可用，浏览器将首先尝试使用 Calibri。如果没有，它会使用 Comic Sans MS 或 Georgia，或者如果其他字体不可用，则仅使用默认的 sans-serif 字体。
这是您可以找出正在使用的字体的方法。我还没有找到任何构建良好且有用的工具以非常好的方式可视化 CSS，但我认为 Inspector 选项对您有用（它不会太令人困惑！）。我认为这是要走的路。
如何使用 Inspector 工具查找 NYTimes 字体的示例：
我将向您介绍如何使用 Google Chrome查找纽约时报文章正文的字体。
转到 NYTimes.com 上的一篇文章，右键单击要为其查找字体的文本元素，然后点击Inspect Element。
查看右侧的侧栏。在Computed Style 下拉列表中，您将看到此元素的 CSS 属性。但是，如您所见，目前这里没有 font-family 属性，这意味着字体是全局定义的，而不仅仅是针对这个特定元素。但是，有一种方法可以解决这个问题！
这就是您要做的：选择“显示继承的”旁边的单选按钮。
许多其他全局属性将出现在“Computed Style”下。
在列表中向下滚动到“font-family”。它应该是灰色的，这意味着它是一个继承的全局属性。在这里，您可以看到使用的字体！达达！
有两种不同的东西：
- 实际使用哪种字体（由浏览器/操作系统使用）。
- 请求的字体（由网站创建者）。
1. 实际使用的是哪种（后备）字体
要确定您的计算机/操作系统上的特定浏览器中使用了哪种字体，现在 Firefox 和 Chrome 都有内置工具。就像 Firefox Page Inspector 有一个Fonts View：
有关更多详细信息，请参阅如何确定浏览器实际用于呈现某些文本的字体？在堆栈溢出上。包括了：
- 文本可能包含不在 CSS 中定义的字体中的 Unicode 字符，因此可能在单个元素中使用多种字体。
- 并非同一台机器上的每个浏览器都可能使用相同的字体类型（例如 TrueType、Apple Advanced Technology、Microsoft OpenType、OpenType PostScript），因此可能使用不同的字体。因此，您可能需要确定在其他浏览器中使用的是哪种字体。
2. 请求的字体
要知道（网站创建者）请求的是哪种字体，内置的 Firefox 页面检查器或其Firebug 扩展等工具有助于检查 CSS 规则。此类工具不会告诉您实际使用的是哪种字体，但会显示特定区域甚至特定单词请求的字体，给定 CSS 样式表：
上图显示了 Firebug。首先在右侧的样式菜单中选择“显示计算样式”。接下来，单击左侧的箭头按钮。然后只需单击您感兴趣的文本。这将更新右侧的 CSS 样式表信息。查看特性以了解 CSS 函数。
有些Firebug Lite也可用于其他浏览器，但我从未使用过。
Safari 中的Web Inspector和Chrome 中的开发者工具有类似的选项。（在 Safari 中，通过首选项启用 Web Inspector：在菜单栏中显示开发菜单。） Internet Explorer 具有F12 工具。
就像 e-t172指出的那样：Firefox的Web 开发人员工具栏也可以显示此信息。但是，CSS » 查看样式信息不会向您显示任何“继承”（“级联”）样式，而只会显示特定于您单击的区域的信息。相反，要获得某种叠加并实际查看字体信息，您可以使用信息»显示元素信息。每当您单击页面某处时，它都会显示详细信息。