除了看到，有没有办法知道哪些字体是当前应用的HTML元素

想想看，我有一个锚标记这个CSS规则上：除了看到，有没有办法知道哪些字体是当前应用的HTML元素

font-family: Helvetica, Verdana, Calibri, Arial, sans-serif;

当然，通过观察在什么是在渲染浏览器，我可以判断哪些字体已经被使用（应用）来格式化当前的锚元素的文本。

但是，我需要知道哪些字体正在通过JavaScript使用（例如jQuery）。这jQuery代码不帮我：

$('#anchor-id').css('font-family');

因为它返回'Helvetica, Verdana, Calibri, Arial, sans-serif;'。有没有办法知道哪种字体现在正在使用？

更新：基于@MC的答案，我创建了这个fiddle，你可以检查它的工作是否正常和完全。

来源

2011-09-05 Saeed Neamati

你为什么需要知道？ – thirtydot

看到这个问题：http://stackoverflow.com/questions/1960817/get-computed-font-family-in-javascript（总而言之，你不能轻易做到，但有一种技巧，你可以尝试） –

@thirtydot，我只需要知道。 :)。我想根据应用的字体做一些生意。（统计分析）。更具体地说，我在我的页面上有一个脚本，就像Google Analytics一样，它会发回一个ajax请求，其中包含有关当前应用字体的信息。 –

首先，您需要测试是否安装了字体。我在互联网上使用了一些脚本来测试字体是否安装。

包含此代码片段somewere（感谢卢卡斯·史密斯）：

var Font = { 

    isInstalled : function (name) { 
     name = name.replace(/['"<>]/g,''); 

     var body = document.body; 
     var test = document.createElement('div'); 
     var installed = false; 
     var teststring = "mmmmmmmmwwwwwwww"; 
     var template = '<b style="display:inline !important; width:auto !important; font:normal 10px/1 \'X\',sans-serif !important">' + teststring + '</b><b style="display:inline !important; width:auto !important; font:normal 10px/1 \'X\',monospace !important">' + teststring + '</b>'; 
     var ab; 

     if (name) { 
      test.innerHTML = template.replace(/X/g, name); 
      test.style.cssText = 'position: absolute; visibility: hidden; display: block !important'; 
      body.insertBefore(test, body.firstChild); 
      ab = test.getElementsByTagName('b'); 
      installed = ab[0].offsetWidth === ab[1].offsetWidth; 
      body.removeChild(test); 
     } 
     return installed; 
    } 
}

此外，使用下面的代码片段（我写我自己）来获得font-family值和拆分该值装入部分。每个部分是一个字体，因为它们是由逗号在CSS代码（例如font-family: "Nimbus", "Courier New";）分离：

function workingFont(element) { 
    var fontString = $(element).css('font-family'); 
    var fonts = fontString.split(","); 
    for (var f in fonts) { 
     if (Font.isInstalled(fonts[f])) { 
      return fonts[f]; 
     } 
    } 
}

正如你可以看到，第一安装的字体将被返回。

使用workingFont(element)，其中element是元素id，类或标记名。这是jQuery API的一部分。 注意，你必须包含jQuery来获得上述脚本的工作。

更新：我创建了这个jsfiddle来测试它。

来源

2011-09-06 10:10:53

+1是一个好主意，但我不会相信这个脚本是在一个严肃的应用程序中。 'ii'字符串在两种不同的字体中具有相同的宽度。选择较长的字符串，由许多不同的字母组成。 –

没错。我读了另一个脚本，'mmmmmmwwwwwwwwww'是测试字符串。我想，用那个测试字符串，字体宽度不可能完全一样，不是吗？ –

我更喜欢一个字符串，其中会出现更多不同的字母。假设您的字体只有一个字母与另一个字母不同。极端情况下，用于演示。 –

除了看到，有没有办法知道哪些字体是当前应用的HTML元素

回答

相关问题