Question

我有一个简单的jQuery函数：

$('#selectable1 span').live('mousedown', function() {
        var ff = $(this).css("font-family");
        $("#family").val(ff);
});

单击span元素（mousedown）时，输入（#family）将获取其字体系列值。它适用于FireFox，但在Chrome中，它仅适用于仅由一个单词组成的字体系列。格鲁吉亚将工作，但Times New Roman不会。

您可以在此处查看代码：

http://jsfiddle.net/aLaGa/

或住在http://www.typefolly.com

这有什么问题？感谢名单

Answer 1

Chrome使用单引号包装多个单词的字体系列。因此，Chrome中返回的font-family值为：'Times New Roman'，与选择列表Times New Roman中的值不匹配。

考虑到所有这些浏览器变体，我认为最好的解决方案是用逗号分隔姓氏，修剪每个字体名称周围的单引号（如果有的话），然后再加入它们。在选择列表中使用此已清理的值。

$('#selectable1 span').live('mousedown', function() {
    var fontFamily = $(this).css('font-family');

    var fonts = fontFamily.split(',');
    var sanitizedFonts = $.map(fonts, function(name) {
        // trim single quotes around font name (if any) for Chrome/Safari
        // trim double quotes around font name (if any) for Firefox
        return name.trim().replace(/^['"]|['"]$/g, '');
    });

    $('#family').val(sanitizedFonts.join(', '));
});

查看example。必须更改选择列表以遵循以下值的一致命名方案：

fontName[, fontName]

这很大程度上依赖于字体名称不包含任何逗号，引用或不引用的事实。

Answer 2

当字体名称包含空格时，您可以稍微更改脚本以替换WebKit添加的引号，如下所示：

$('#selectable1 span').live('mousedown', function() {
  var ff = $(this).css("font-family").replace(/\'/g,"");
  $("#family").val(ff);
});

You can see a working demo here：）

And here's a RegEx approach pulling the literal value out of style that's probably easier than anything，但我不是RegEx大师，有人可以随意改进并更新答案（我在RegEx吮吸，抱歉！）这适用于您拥有的所有示例。

Answer 3

Font-family提供逗号分隔值的列表，而不是使用的字体。它也可以用引号给出值。在您的示例页面上，添加行alert(ff)会给出：

'Times New Roman'

Georgia

adage-script-1, adage-script-2

jQuery val在Chrome中无法正常工作

3 个答案: