9

jQueryで要素の割り当てられたフォントを取得することは可能ですか?

css があるとしましょう:

#element
{
font-family: blahblah,Arial;
}

上記の例では、Arial フォントが #element に割り当てられます。JS/JQuery 経由でその情報を取得する方法はありますか?

何かのようなもの:

$('#element').css('font-family');

ちょうど返すblahblah,Arial;

4

4 に答える 4

11
(function($) {
    $.fn.detectFont = function() {
        var fonts = $(this).css('font-family').split(",");
        if ( fonts.length == 1 )
            return fonts[0];

        var element = $(this);
        var detectedFont = null;
        fonts.forEach( function( font ) {
            var clone = element.clone().css({'visibility': 'hidden', 'font-family': font}).appendTo('body');
            if ( element.width() == clone.width() )
                detectedFont = font;
            clone.remove();
        });

       return detectedFont;
    }
})(jQuery);

edit :クローンされたアイテムをdomから削除する必要がありました。

先ほどこれをまとめましたが、やはり要素の幅に依存しているため、マイレージは異なる場合があります。

$('#element').detectFont(); //outputs Arial

于 2013-03-27T17:32:50.140 に答える
3

Detector ライブラリを使用してそれを行うことができます: http://www.lalit.org/lab/javascript-css-font-detect/

ブラウザはリストから最初に見つかったフォントを取得するため、フォントのリストを調べて、システムにこのフォントがあるかどうかを確認してください。

JS/JQuery コードは次のとおりです。

$(function() {
    var detectFont = function(fonts) {
        var detective = new Detector(), i;
        for (i = 0; i < fonts.length; ++i) {
           if (detective.detect(fonts[i]) !== true) {
               continue
           }
           return fonts[i];
        }    
    }
    var fonts = $('#abcde').css('font-family');
    fonts = fonts.split(',');
    console.log(detectFont(fonts));
});

そして、これがライブデモです。準備しました: http://jsfiddle.net/netme/pr7qb/1/

うまくいけば、このアプローチが役に立ちます。

于 2013-03-27T17:24:08.953 に答える
-5
$('#element').css("font-family", "Arial");

これを試して。

于 2013-03-27T19:05:32.500 に答える