JQuery: Wie man zugewiesenen schriftart element

Ist es möglich, zum abrufen der zugewiesenen schriftart eines Elements in jQuery?

Sagen wir, es ist css:

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

Im obigen Beispiel die Schrift Arial zugewiesen werden soll #in element. Gibt es eine Möglichkeit, um die Informationen über JS/JQuery?

Etwas wie:

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

gibt nur blahblah,Arial;

  • Sie kann es nicht, aber es gibt clevere workaround. Siehe: stackoverflow.com/a/1961519/1064286
  • das ist interessant workaround, aber nicht mein problem lösen. Wenn ich zum Beispiel überprüfen möchten, zu dem schriftbrowser fallbacks, wenn es keine passende schriftart.
InformationsquelleAutor el vis | 2013-03-27
  1. 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);

    Bearbeiten: hatte zu entfernen, das geklonte Element aus dem dom.

    Schlagsahne dies gerade jetzt wieder, es basiert immer noch auf Elementbreite - so kann Ihre Laufleistung variieren.

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

    InformationsquelleAutor kmfk
  2. 3

    Können Sie Detektor-Bibliothek, um es zu tun: http://www.lalit.org/lab/javascript-css-font-detect/

    Als der browser nimmt die erste Gefundene schriftart aus der Liste, sollten Sie schauen Sie durch die Liste der Schriftarten und versuchen zu prüfen, ob diese schriftart in Ihrem system.

    Hier ist JS/JQuery-code:

    $(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));
});

    Und hier ist die live-demo, die ich vorbereitet habe:
    http://jsfiddle.net/netme/pr7qb/1/

    Hoffe, dieser Ansatz wird Ihnen helfen.

    • netme, ja das ist fast das, aber die meisten Fall würde ich, wie das ist, wenn es keine schriftart aus dem font-Familie zugeordnet, aber einige Standard-nach-fallback, wie wenn ich font-family:Arial für einige japanische oder chinesische.
    • auch wenn die Schrift wirklich von einem Elternteil geerbt element, sollte es noch funktionieren.
    • aber im fallback-Fall-schriftart wird nicht vererbt vom übergeordneten element, aber es wird zugewiesenen schriftart (aus OS-Schriften), die in der Lage ist, zur Anzeige von japanischen/chinesischen Zeichen, und ich muss wissen, was es ist. Jetzt sehe ich, es ist wahrscheinlich unmöglich. Trotzdem danke
    • ja, ich denke, es ist unmöglich.
    InformationsquelleAutor Mikhail Chernykh
  3. 2

    Geändert kmfk Antwort, so dass es funktioniert für alle Elemente. Block-Elemente haben Feste oder dynamische Breite funktioniert nicht, so dass diese mithilfe von inline-Elementen:

    /**
 * Detects the font of an element from the font-family css attribute by comparing the font widths on the element
 * @link http://stackoverflow.com/questions/15664759/jquery-how-to-get-assigned-font-to-element
 */
(function($) {
    $.fn.detectFont = function() {
        var fontfamily = $(this).css('font-family');
        var fonts = fontfamily.split(',');
        if ( fonts.length == 1 )
            return fonts[0];

        var element = $(this);
        var detectedFont = null;
        fonts.forEach( function( font ) {
            var clone = $('<span>wwwwwwwwwwwwwwwlllllllliiiiii</span>').css({'font-family': fontfamily, 'font-size':'70px', 'display':'inline', 'visibility':'hidden'}).appendTo('body');
            var dummy = $('<span>wwwwwwwwwwwwwwwlllllllliiiiii</span>').css({'font-family': font, 'font-size':'70px', 'display':'inline', 'visibility':'hidden'}).appendTo('body');
            //console.log(clone, dummy, fonts, font, clone.width(), dummy.width());
            if ( clone.width() == dummy.width() )
                detectedFont = font;
            clone.remove();
            dummy.remove();
        });

       return detectedFont;
    }
})(jQuery);
    InformationsquelleAutor bucabay
  4. -5
    $('#element').css("font-family", "Arial");

    Versuchen.

    • Wird weisen Schrift Arial, nicht return, was der OP fragt zu tun. Wenn er Sätze schriftart "blahblah,Arial" - will er wissen, welcher der beiden tatsächlich genutzt wird, wird durch den browser.
    • oops sorry ... ich wollte nicht verstehen, Frage voll gut. Jetzt bin ich gonna versuchen.
    InformationsquelleAutor Hassaan
Schreibe einen Kommentar