除了看到，有沒有辦法知道哪些字體是當前應用的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元素

回答

相關問題