用于确定网站上使用的字体的实用程序?

用于确定网站上使用的字体的实用程序?

例如:我喜欢网站上使用的字体:纽约时报,所以可以列出网站使用的所有字体会很好!

我愿意不是想要一个图像处理实用程序可以分析截图的网站,或者询问有关字体的问题并从列表中缩小范围。

某种可以抓取网站并列出其字体的东西...如果它可以将字体覆盖在区域上,那就太好了,但我想,那就太过分了。

答案1

有多种方法可以实现这一点。我实际上经常这样做,因为我对 CSS 的工作原理非常感兴趣,而且我只是排版。我喜欢用以下两种方式来实现这一点:

  • 在浏览器中使用“检查器”(这就是您要找的!)- 我用谷歌浏览器(因为我喜欢它),它有一个内置检查器工具。你真的应该试一试。你只需进入一个网站,右键单击要分析的任何元素,然后从上下文菜单中单击“检查元素”。检查器显示 HTML 和 CSS 的动态属性,因此如果你检查文本元素,你会看到font-familycss 属性在检查器(右侧栏)中,它会告诉您字体是什么(有关如何解释此 CSS 的信息,请参阅下文)。您可以使用 Firefox 的 Firebug 来完成类似的操作,但我认为 Google Chrome 检查器工具更胜一筹(我是一名 Web 开发人员 - 我用它来做所有事情!)。
  • 或者,您可以手动查看页面源代码并分析 CSS。操作方法如下:

    1. 当您在页面上时,查看源代码。如果您使用的是 Internet Explorer,请转到页面 --> 查看源代码或查看 --> 源代码。如果您使用的是 Firefox、Chrome 或任何其他现代浏览器,请按 Ctrl+U(或 Apple+U,具体取决于您的操作系统)。

    2. 在 HTML 代码中,搜索您要分析的文本内容。您应该找到一些包含文本的标签,它们可能将字体硬编码到 HTML 中(使用标签<font>或在或style属性中),或者可能引用某些 CSS(查找或属性,并记下来)。<p><div>classid

    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 选项对您有用(它不是令人困惑!)我认为这是可行的方法。

使用检查器工具查找 NYTimes 字体的示例:

我将引导您了解如何找到《纽约时报》文章使用 Google Chrome。

  1. 前往 NYTimes.com 上的一篇文章,右键单击要查找字体的文本元素,然后点击检查元素

    打开检查器

  2. 查看右侧的侧边栏。在计算样式下拉菜单,您将看到此元素的 CSS 属性。但是,如您所见,这里目前没有 font-family 属性,这意味着字体是全局定义的,而不仅仅是针对此特定元素。但是,有一种方法可以解决这个问题!

    查看元素属性

  3. 这是你做的:选择单选按钮“显示继承”旁边。

    选择显示继承的

  4. 许多其他全局属性将出现在“计算样式”下。

    出现许多全局属性

  5. 向下滚动在列表中将其改为“font-family”。它应该是灰色的,这意味着它是一个继承的全局属性。在这里,您可以看到所使用的字体!瞧!

    这是字体!

答案2

有两点不同:

  1. 浏览器/操作系统实际使用了哪种字体。
  2. (网站创建者) 请求了哪种字体。

1. 实际使用哪种(后备)字体

要确定哪种字体用过的在您的计算机/操作系统上的特定浏览器中,如今 Firefox 和 Chrome 都有内置工具。例如 Firefox Page Inspector 有一个字体视图

Firefox 字体视图

有关详细信息,请参阅如何确定浏览器实际使用什么字体来呈现某些文本?在 Stack Overflow 上。其中包括:

  • 文本可能包含 CSS 中定义的字体中没有的 Unicode 字符,因此多种的字体可能在单个元素中使用。
  • 同一台机器上的每个浏览器可能不使用相同的字体类型(例如 TrueType、Apple Advanced Technology、Microsoft OpenType、OpenType PostScript),因此可能使用不同的字体。因此您可能需要确定其他浏览器使用哪种字体。

2. 请求了哪种字体

要判断网站创建者请求了哪种字体,可以使用 Firefox 内置的 Page Inspector 或其Firebug 扩展帮助检查 CSS 规则。此类工具不会告诉您实际上使用了哪种字体用过的,但它确实显示了哪种字体请求对于特定区域,甚至对于特定单词,给定 CSS 样式表:

Firebug 中的 CSS

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

一些Firebug 精简版也适用于其他浏览器,但我从未使用过。

Web 检查器在 Safari 中和开发者工具Chrome 中有类似的选项。(在 Safari 中,通过偏好设置启用 Web Inspector:在菜单栏中显示开发菜单)Internet Explorer 具有F12 工具

喜欢 e-t172著名的: 这Web 开发人员工具栏Firefox 也可以显示此信息。但是,CSS » 查看样式信息不会显示任何“继承”(“级联”)样式,而只会显示特定于您单击的区域的信息。相反,要获取一种覆盖并实际查看字体信息,您可以使用信息 » 显示元素信息。这将在您单击页面某处时显示详细信息。

答案3

如果你使用 Firefox,则字体查找器插件. 它基本上做什么马克西姆 Z.描述于他的回答,而是自动的,所以它真的很容易使用。

答案4

我不知道什么软件。我只是用 Internet Explorer,发现使用的字体是:

字体系列:georgia,“times new roman”,times,serif

这是主要字体。在样式表中搜索带有 font-family 的任何内容即可找到其余内容。

过程:

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

如果您在图像中寻找字体,则该字体不会在图像外部定义。

是的,我非常无聊。毕竟是星期五下午。我没有发布链接,因为他们会定期更新样式表。

相关内容