首页 文章

如何确定浏览器实际使用哪种字体来呈现某些文本?

提问于
浏览
149

我的CSS为整个页面指定了“ font-family: Helvetica, Arial, sans-serif; ” . 看起来Verdana在某些部分被使用了 . 我希望能够验证这一点 .

我已经尝试从浏览器复制和粘贴到Word,但它不保留字体 .

有没有办法确定哪个字体实际用于一段文本?

Firebug会给我上面的字体列表[1],但是我没有看到确定使用哪种字体的方法 .

  • 事实证明正在使用错误的列表,这解决了我原来的Verdana问题 . 但我_1588270是一种识别实际渲染字体的方法 .

8 回答

  • 0
  • 1

    WhatFont是Chrome扩展程序,它会明确告诉您正在加载字体堆栈中的哪种字体 .

  • 1

    对于当前版本的Firefox(自v7起),有一个名为“fontinfo”的附加组件,它将报告所使用的实际字体(而不是CSS font-family属性所说的内容),同时考虑到浏览器回退到的情况 . 不同的字体,因为请求的字体系列不可用或不支持文本中使用的字符 .

  • 30

    您可以尝试使用Firebug for Firefox检查该特定部分 . 它应该给你所有的确切属性 .

  • 124

    jeremy提到的“FontFinder”插件似乎无法在这里工作,无论实际呈现的字体是什么,都会给出CSS列表的第一个字体(Linux上的Firefox 4.0rc1) . 但是,以下插件会为您提供“正确”的字体 .

    Context Font

  • 43

    根据Wilfred Hughes' answer,Firefox现在支持此功能 . This article has more details .

    这个答案原始引用了“Font Finder”插件,但仅仅因为它来自4年前 . 旧答案如此流传,社区无法更新这一事实是Stack Overflow为数不多的失败之一 .

  • 7

    如今Chrome和Firefox都有内置的工具,但Safari需要你复制一些文本并进行调查 .

    在Firefox中,Page Inspector有一个Fonts view

    Firefox Fonts View

    这也会告诉您是否下载了字体 .

    对于Chrome,请进入DevTools的“Elements”,转到“Computed”选项卡,然后一直向下滚动到“Rendered Fonts”部分:

    Chrome web inspector

    上面的屏幕截图显示可能会显示Unicode文本的多种字体 . Chrome告诉你6个glyphes(“Pekka”和空格)正在使用“Arial”,而一个(“웃”)正在使用“Apple SD Gothic Neo”:

    Arial - 本地文件(6个字形)Apple SD Gothic Neo - 本地文件(1个字形)

    实际的CSS定义:

    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif
    

    但这些字体通常不包含许多特殊字符 . 由于字体信息适用于每个HTML元素,其中元素中的Unicode文本实际上可以使用多种字体,因此它也显示多种字体 . 如有疑问,只需双击HTML窗格中的文本即可删除您不感兴趣的文本 . 然后,再次选择周围的元素时,您只会看到一个选项 . 在这种情况下,它会告诉你两个浏览器都使用“Apple SD Gothic Neo Regular”作为“웃”字符 .

    不幸的是,由于浏览器支持/首选的字体类型,同一台机器上的不同浏览器(甚至是单个浏览器的不同版本)可能会使用不同的字体 . 例如,在Mac上,Safari可能更喜欢Apple Advanced Technology,而Firefox支持Microsoft OpenType(在Mac上安装Microsoft Office后可能会产生problems for Arabic) . 或者对于上面屏幕截图中的"웃"字符,我的Mac上的Chrome和Firefox现在更喜欢"Apple SD Gothic Neo"(这是OpenType PostScript),但旧版本的Firefox使用了"AppleGothic Regular"(这是一种TrueType字体) .

    对于没有类似字体视图的浏览器,只需将文本片段复制并粘贴到某个文字处理器或富文本编辑器中,选择一些特定文本,然后查看某些字体下拉列表中显示的名称 . 在我的Mac上,当从Firefox粘贴时,这不起作用(“웃”Firefox的“Apple SD Gothic Neo”在粘贴时转换为“AppleMyungjo”),但适用于Safari和Chrome:

    Text pasted from browser into rich text editor

  • 29

    基于Lalit Patel的文本测量方法和脚本,我创建了bookmarklets,它可以猜测当前所选文本使用的字体(如果没有选择,则为 body ) . 对于我来说,找出堆栈中的哪个字体似乎非常有效用过的! (但它无法告诉你 sans-serif 究竟映射到了什么 . )

    grab 他们:https://alanhogan.com/bookmarklets#font-stack-full

    来源是on GitHub .

    另请参阅:this CodePen,它主要使用相同的代码 . 通过选择不同的段落尝试并观看表格/猜测更新!

相关问题