見に加えて、私はアンカータグのため、このCSSルールを持っていることを考慮して、現在のHTML要素

Question

に適用されるフォントを知るためにどのような方法があります：でレンダリングされたもので、見て

もちろん

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

は、現在のアンカー要素のテキストを書式設定するために、これらのフォントのどれが既に使用（適用）されているかを判断できます。

しかし、JavaScript（jQueryなど）で現在使用されているフォントを知る必要があります。このjQueryのコードは、私を助けていません：

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

それは'Helvetica, Verdana, Calibri, Arial, sans-serif;'を返すため。どのフォントが現在動作しているかを知る方法はありますか？

更新：@MCの回答に基づいて、私はこのfiddleを作成しました。それがうまく動作していることを確認できます。

Answer 1

まず、フォントがインストールされているかどうかをテストする必要があります。私はフォントがインストールされているかどうかをテストするインターネット上でいくつかのスクリプトを使用しています。

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を作成しました。