实用程序来确定网站上使用的字体？[关闭]

9

例如：我喜欢网站NYTimes上使用的字体，因此可以列出该网站使用的所有字体的东西会很棒！

我不想要一个可以分析屏幕截图的图像处理实用程序，也不希望一个网站会询问有关字体的问题并从其列表中缩小范围。

可能会抓取网站并列出其字体的东西……如果可以将字体覆盖在区域上，那就太好了，但是我想那太过分了。

software-rec website fonts

— 拉泽
source

@Arjan为什么:-(？？我明确提到了我不想要的内容，这是那里大部分答案的主题。–

— Lazer

如今，Firefox仅用一个页面就使这变得非常容易。看到我更新的答案。

— Arjan 2013年

20

有多种方法可以实现此目的。我实际上做了很多，因为我对CSS的工作方式非常感兴趣，而且我也喜欢排版。我喜欢这样做的两种方式是：

在浏览器中使用“检查器”（这就是您要寻找的！） -我使用Google Chrome（因为我喜欢它），它具有内置的检查器工具。您真的应该尝试一下。您只需转到站点，右键单击要分析的任何元素，然后从上下文菜单中单击“检查元素”。检查器显示HTML和CSS的动态属性，因此，如果要检查文本元素，将看到font-familycss属性在检查器中（在右侧栏中），它将告诉您字体是什么（有关如何解释此CSS的信息，请参见下文）。您可以使用Firebug for Firefox来完成类似的操作，但是我相信Google Chrome Inspector工具要优越得多（我是一名Web开发人员-我将它用于所有功能！）。
或者，您可以手动查看页面的源代码并分析CSS。方法如下：
1. 在页面上时，查看源。如果您使用的是Internet Explorer，请转到页面->查看源代码或查看->源代码。如果您使用的是Firefox，Chrome或任何其他现代浏览器，请按Ctrl + U（或Apple + U，具体取决于您的操作系统）。
2. 在HTML代码中，搜索您要分析的文本内容。您应该找到一些包含文本的标签，并且它们要么将字体硬编码到HTML中（使用<font>标签，要么在stylea <p>或<div>附件的属性中），或者可以引用一些CSS（查找class或id属性），并写下来）。
3. 如果是后者（它引用了一些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上的文章，右键单击要查找其字体的文本元素，然后单击“ 检查元素”。
查看右侧的侧栏。在“ 计算样式”下拉列表中，您将看到此元素的CSS属性。但是，如您所见，当前这里没有font-family属性，这意味着字体是全局定义的，而不仅仅是针对此特定元素的。但是，有一种解决方法！
为此，您需要执行以下操作：选择 “显示继承的内容”旁边的单选按钮。
许多其他全局属性将出现在“计算样式”下。
在列表中向下滚动到“字体家族”。它应该为灰色，表示它是继承的全局属性。在这里，您可以看到所使用的字体！-

— 马克西姆·扎斯拉夫斯基（Maxim Zaslavsky）
source

我现在将为NYTimes添加示例说明。

— Maxim Zaslavsky

谢谢ppl我爱这个地方-www.superuser.com，甚至现在更多:)

— Lazer

@ Maximz2005，对于某些选择，我没有获得“计算样式”下拉列表。我只是得到一个空的样式下拉列表。这是为什么？

— Lazer

1

由于该检查器实际上是WebKit检查器，因此我认为更高的测试版还将包含WebKit的更新版本吗？当然，较新的版本可能会显示新的错误，但我想知道您是否遇到了新的错误。有没有办法显示Chrome中使用的WebKit版本？

— Arjan

1

我的是WebKit 532.0 @MaximZ。我在朋友的Chrome浏览器中进行了试用（版本3.something）。它在那里完美工作。我终于可以按照自己的方式检测字体了。现在，我了解了“检查元素”功能的确有多酷。

— Lazer

7

有两件事：

实际使用哪种字体（浏览器/操作系统）。
请求了哪种字体（网站创建者）。

1.实际使用哪种（备用）字体

为了确定您的计算机/操作系统上的特定浏览器中使用了哪种字体，如今Firefox和Chrome已经内置了该工具。就像Firefox Page Inspector具有字体视图：

有关更多详细信息，请参见如何确定浏览器实际用于渲染某些文本的字体？在堆栈溢出。那包含着：

文本可能包含CSS字体中未包含的Unicode字符，因此单个元素中可能会使用多种字体。
并非同一台计算机上的每个浏览器都可能使用相同的字体类型（例如TrueType，Apple Advanced Technology，Microsoft OpenType，OpenType PostScript），因此可能使用不同的字体。因此，您可能需要确定在其他浏览器中使用哪种字体。

2.要求哪种字体

为了确定（网站创建者）请求了哪种字体，内置的Firefox Page Inspector或其Firebug扩展之类的工具可帮助检查CSS规则。此类工具不会告诉您实际使用的是哪种字体，但是在给出CSS样式表的情况下，它确实显示了特定区域甚至特定单词所要求的字体：

上面显示了Firebug。首先在右侧的“样式”菜单中选择“显示计算的样式”。接下来，单击左侧的箭头按钮。然后只需单击您感兴趣的文本。这将更新右侧的CSS样式表信息。查看功能以了解CSS功能。

一些Firebug Lite也可用于其他浏览器，但我从未使用过。

Safari中的Web Inspector和Chrome中的Developer Tools具有相似的选项。（在Safari中，通过以下首选项启用Web Inspector：在菜单栏中显示“开发”菜单。）Internet Explorer具有F12工具。

就像e-t172 所述：Firefox 的Web开发人员工具栏也可以显示此信息。但是，“ CSS»视图样式信息”不会显示任何“继承”（“级联”）样式，而只会显示特定于您单击的区域的信息。相反，要获得一种覆盖并实际查看字体信息，可以改用信息»显示元素信息。每当您单击某处的页面时，它将显示详细信息。

— Arjan
source

+1要获得更详细的答案，请联系我。

— BinaryMisfit

您是如何获得这些淡入淡出的屏幕截图的？看起来像Mac，是否有可能在Vista或XP上获得类似的效果？

— Lazer

@Lazer，在Mac上为Skitch（但是阴影是一种标准且必不可少的，因为OS X的窗口边框非常细，如果有的话）。不知道如何在Windows上完成它。

— Arjan 2010年

4

如果您使用Firefox，则有“ 字体查找器加载项”。它基本上完成了Maxim Z.在他的回答中描述的内容，但是会自动执行，因此非常易于使用。

— 路德维希·温齐尔
source

字体查找器正是我想要的。如果只有适用于Chrome的扩展程序。

— kangax 2011年

@kangax，现在有；看到亚历克的答案

— Arjan

还有@kangax，如今Firefox和Chrome具有内置工具来确定真实字体。没有更多的猜测。

— 2014年

4

到目前为止，这是我遇到的最好的解决方案。通过将显示的文本的像素与每种可用字体的像素（包括TypeKit和Google Font API字体）进行比较，它是一个bookmarklet /扩展名，将在99％的时间内告诉您使用哪种字体。

WhatFont工具

在此处输入图片说明

一探究竟。

— 最高
source

很好，很好，但是我不认为它实际上是在比较像素（当今）？当CSS刚刚说的font-family: sans-serif时候，那也是报告的内容-但是它本身不是字体。使用时font-family: someUnknownFont得到(default font)的结果是Mac上的Times。（使用此JS Bin，使用小书签进行了测试；屏幕截图。）不过，再次：很好！

— Arjan

@Arjun我在几个月前对它进行了详细的检查，因此我会尽力而为地解释。在引擎盖下，它有两件事。它用于window.getComputedStyle获取计算出的字体系列。然后，它会迭代此堆栈，将每种字体的像素与显示的像素进行比较。第一个匹配项是在弹出窗口中以斜体显示的匹配项，其余匹配项则正常显示。如果没有匹配项，则会显示(default font)。您看到的原因sans-serif是因为它可以正确地将其与sans-serif字体匹配，但是目前无法进一步识别。

— 2013年

Firefox是我的新好友。看到我的最新答案 :-)

— Arjan 2013年

3

我不知道任何软件。我只是使用Internet Explorer，发现使用的字体是：

字体家族：佐治亚州，“时代新罗马”，时代，谢里夫

这是主要字体。在样式表中搜索带有字体系列的所有内容，将提供其余内容。

处理：

右键单击主页
查找rel = stylesheet行和随附的样式表URL
复制并粘贴到浏览器中，然后下载css文件。
在文本编辑器中打开。

如果您在图像中寻找未在图像外部定义的字体。

_{是的，我感到无聊。毕竟是星期五下午。我没有发布链接，因为它们会定期更新样式表。}

— 二进制错误
source

恩，Firefox中的Firebug或Safari中的Web检查器...？

— Arjan

1

就像我说的。我很闷。更改您的浏览器风格和查看源代码。还有其他工具，但保持简单不一定是错误的方法。

— BinaryMisfit

仅因为它教给用户的东西不总是依赖Firefox，这本身就很好。

— 随机

根据Wikipedia所述，georgia和times new roman均为字体。那么，结果是什么意思呢？这两种字体的组合？

— Lazer

1

您可以使用Web Developer Firefox扩展来查看网页特定部分使用的所有样式。使用CSS菜单，查看样式信息。然后单击要分析的文本，然后在结果中搜索“ font-family”属性。

— 艾蒂安·德尚（Etienne Dechamps）
source

信息»显示元素信息效果更好（它也将显示继承的样式，并且您无需进行搜索）。

— Arjan

1

与许多人所说的相反，查看源代码等并非总是问题，而是取决于CSS是在文档中还是在外部CSS文件中。如果是外部文件，则不能只查看源代码并找到font-family标签，因为它实际上不在文件中。

建议使用Google Chrome浏览器的发布者实际上给出了一个很好的提示-我在这里学到了一些东西，并希望添加一个额外的提示。在Chrome附带的开发人员工具中，您可能必须先单击“计算样式”，然后单击“显示继承的”复选框，然后向下滚动才能找到它-这是一个极端的示例，但是显示的位置取决于页面的结构。

0

这是一个简单但有效的解决方案：一个书签，它向您显示应用于元素（包括font-family）的配置。

杰西（Jesse）的书签网站（Bookmarklets Site）可以胜任此工作computed styles。

您可以在这里：https : //www.squarefree.com/bookmarklets/webdevel.html#computed_styles

— 阿德里亚诺
source

-1

如果不是内联CSS，请在源代码视图中打开页面。复制CSS地址，例如将“ /themes/01.css”粘贴到浏览器网址上。在文本编辑器或CSS编辑器中复制返回粘贴。使用find可以调整字体或字体系列。列出的字体系列用于显示页面字体的大小和其他属性，例如粗体，斜体等。

谢谢doronto

— 获得免费的反向链接
source