检测粗体和斜体支持

Question

某些字体不支持 CSS 斜体或粗体（例如 Zapfino 不支持斜体，因为它已经很像脚本了）。我想检测何时不支持字体样式，以便我可以在编辑器中禁用样式按钮。

我尝试了like this：

that.checkFontData = function( fontList )
{   var test = $("<span style='font-size:24px;absolute;visibility:hidden;height:auto;width:auto;white-space:nowrap;'>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910</span>");
    $('body').append( test );
    for (var i= 0, iMax = fontList.length; i < iMax; ++i)
    {   test.css( 'fontFamily', fontList[i] );
        var normalWidth = test.outerWidth( true );
        var normalHeight = test.outerHeight( true );
        test.css( 'fontStyle', 'italic' );
        var italicWidth = test.outerWidth( true );
        var italicHeight = test.outerHeight( true );
        test.css( 'fontStyle', 'normal' );
        test.css( 'fontWeight', 'bold' );
        var boldWidth = test.outerWidth( true );
        var boldHeight = test.outerHeight( true );
        console.log( fontList[i]  + ", normal: " + normalWidth + ", bold: " + boldWidth + ", italic: " + italicWidth  );
    }
    test.remove( );
};

但它不起作用...许多提供斜体或粗体的字体报告相同的宽度。

接下来，我想用画布元素来检测这一点，但是，可惜的是，Firefox 甚至不会在画布中呈现斜体文本，所以这个想法搞砸了。

你有什么建议？

Answer 1

我已经在 jsFiddle 中测试了您的代码，它确实为 Georgia 和 Arial 等自然网络字体提供了不同的大小，但对于像 Snowburst One (Googlefont) 这样的外部加载字体则没有。

JS fiddle of your script

经过一些研究，我发现对于 @font-face 加载的字体没有 css 字体转换适用。人们加载@font-face 变体并像这样应用它们：

body { font-family:"DroidSerifRegular", Georgia, serif; }
h1 {
    font-family:"DroidSerifBold", Georgia, serif;
    font-weight:normal;
}
em {
    font-family:"DroidSerifItalic", Georgia, serif;
    font-weight:normal;
    font-style:normal;
}
strong em {
    font-family:"DroidSerifBoldItalic", Georgia, serif;
    font-weight:normal;
    font-style:normal;
}

如果您使用的@font-face 字体与上面的示例中一样，您可能会想出某种命名约定。然后，您可以通过检查与后备字体相比的宽度来检查这些字体是否存在。

test.css('fontFamily', 'sans-serif');
var defaultWidth = test.outerWidth( true );

for (var i= 0, iMax = fontList.length; i < iMax; ++i)
{   test.css( 'fontFamily', fontList[i] + ', sans-serif' );

    var normalWidth = test.outerWidth( true );
    var normalHeight = test.outerHeight( true );
    test.css( 'fontFamily', fontList[i] + 'Italic, sans-serif' );
    var italicWidth = test.outerWidth( true );
    var italicHeight = test.outerHeight( true );
    test.css( 'fontFamily', fontList[i] + 'Bold, sans-serif' );
    var boldWidth = test.outerWidth( true );
    var boldHeight = test.outerHeight( true );
    console.log( "default: "+ defaultWidth + ", " fontList[i]  + ", normal: " + normalWidth + ", bold: " + boldWidth + ", italic: " + italicWidth  );
}

如果样式版本的宽度与默认版本相比有所改变，那么它就是“Bingo”！

注意：这不适用于等宽字体，因为所有字符的宽度始终相同。

Answer 2

要检测 bold 和 italic 支持，您可以将文本转换为图像并进行比较。

方法是：

1. 创建一个canvas^见下文（无需将其附加到 DOM）
2. 在canvas中绘制文字
3. 将画布转换为图像（这里我使用png）
4. 比较图片的base64字符串

关于canvas：

接下来，我想用画布元素来检测这一点，但是，可惜的是，Firefox 甚至不会在画布中呈现斜体文本，所以这个想法搞砸了。

某些字体在 Firefox 的画布中没有斜体，因为本机斜体字体不存在。其他浏览器会尝试对字体进行伪斜体化（倾斜）。

View on jsFiddle（此演示还测试了 Google 字体 Snowburst One）

function detectBoldItalic(fonts) {
    // Create canvas
    var canvas = document.createElement('canvas');
    canvas.width = 1000;
    canvas.height = 30;
    var context = canvas.getContext("2d");
    var test = {}, results = {};
    // Default
    context.font = "normal 16px a base case font";
    context.fillText("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910", 10, 20);
    var standard = canvas.toDataURL("image/png");
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);
    // Start test
    for (var i = 0; i < fonts.length; i++) {
        var styles = ["normal", "bold", "italic"];
        test[fonts[i]] = {};
        results[fonts[i]] = {};
        for (var j = 0; j < styles.length; j++) {
            // Draw text in canvas
            context.font = styles[j] + " 16px " + fonts[i];
            context.fillText("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910", 10, 20);
            // Convert canvas to png
            test[fonts[i]][styles[j]] = canvas.toDataURL("image/png");
            // Clear canvas
            context.setTransform(1, 0, 0, 1, 0, 0);
            context.clearRect(0, 0, canvas.width, canvas.height);
        }
        if (test[fonts[i]]["normal"] !== standard) {
            results[fonts[i]]["bold"] = test[fonts[i]]["normal"] !== test[fonts[i]]["bold"] ? true:false; // Support bold
            results[fonts[i]]["italic"] = test[fonts[i]]["normal"] !== test[fonts[i]]["italic"] ? true:false; // Support italic
        } else {
            results[fonts[i]] = false; // Font does not exist
        }
    }
    return results;
}
console.log(detectBoldItalic(["Arial","Zapfino"]));

Answer 3

使用 Font.js，您可以更可靠地访问字体指标以进行计算。 http://pomax.nihongoresources.com/pages/Font.js