javascript JQuery：如何为元素分配字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15664759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery: How to get assigned font to element
提问by el vis
Is it possible to retrieve the assigned font of an element in jQuery?
是否可以在 jQuery 中检索元素的指定字体？
Let's say there is css:
假设有 css：
#element
{
font-family: blahblah,Arial;
}
In the above example, Arial font will be assigned to #element. Is there a way to get that information via JS/JQuery?
在上面的例子中，Arial 字体将被分配给#element。有没有办法通过 JS/JQuery 获取该信息？
Something like:
就像是：
$('#element').css('font-family');
returns just blahblah,Arial;
只返回 blahblah,Arial;
回答by kmfk
(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: had to remove the cloned item from the dom.
编辑：必须从 dom 中删除克隆的项目。
Whipped this up just now, again, it still relies on element width - so your mileage may vary.
刚才再提一下，它仍然依赖于元素宽度 - 所以你的里程可能会有所不同。
$('#element').detectFont(); //outputs Arial
$('#element').detectFont(); //outputs Arial
回答by Mikhail Chernykh
You can use Detector library to do it: http://www.lalit.org/lab/javascript-css-font-detect/
您可以使用 Detector 库来做到这一点：http: //www.lalit.org/lab/javascript-css-font-detect/
As the browser takes the first found font from the list, you should look through the list of fonts and try to check if you have this font in your system.
当浏览器从列表中获取第一个找到的字体时，您应该查看字体列表并尝试检查您的系统中是否有这种字体。
Here is JS/JQuery code:
这是 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));
});
And here is live demo, I've prepared: http://jsfiddle.net/netme/pr7qb/1/
这是现场演示，我已经准备好了：http: //jsfiddle.net/netme/pr7qb/1/
Hope, this approach will help you.
希望，这种方法会对你有所帮助。
回答by bucabay
Modified kmfk's answer so that it works for all elements. Block elements have fixed or dynamic width won't work so this uses inline elements:
修改了 kmfk 的答案，使其适用于所有元素。块元素具有固定或动态宽度将不起作用，因此使用内联元素：
/**
* 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);
回答by Hassaan
$('#element').css("font-family", "Arial");
Try this.
试试这个。
