15

アンカー タグに次の CSS ルールがあるとします。

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

もちろん、ブラウザーでレンダリングされるものを監視することで、現在のアンカー要素のテキストをフォーマットするために、これらのフォントのどれが既に使用 (適用) されているかを判断できます。

ただし、JavaScript (jQuery など) を介して現在使用されているフォントを知る必要があります。このjQueryコードは役に立ちません：

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

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

更新: @MC の回答に基づいて、このフィドルを作成しました。うまく機能していることを確認できます。

4

1 に答える 1

8

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

次のコード スニペットを含めます (Lucas Smith に感謝):

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)。ここで、要素は要素 ID、クラス、またはタグ名です。これはjQuery APIの一部です。前述のスクリプトを機能させるには、jQuery を含める必要があることに注意してください。

更新: このjsfiddleを作成してテストしました。

于 2011-09-06T10:10:53.037 に答える