jQueryで要素の割り当てられたフォントを取得することは可能ですか?
css があるとしましょう:
#element
{
font-family: blahblah,Arial;
}
上記の例では、Arial フォントが #element に割り当てられます。JS/JQuery 経由でその情報を取得する方法はありますか?
何かのようなもの:
$('#element').css('font-family');
ちょうど返すblahblah,Arial;
jQueryで要素の割り当てられたフォントを取得することは可能ですか?
css があるとしましょう:
#element
{
font-family: blahblah,Arial;
}
上記の例では、Arial フォントが #element に割り当てられます。JS/JQuery 経由でその情報を取得する方法はありますか?
何かのようなもの:
$('#element').css('font-family');
ちょうど返すblahblah,Arial;
(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
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/
うまくいけば、このアプローチが役に立ちます。
$('#element').css("font-family", "Arial");
これを試して。