Javascript 检测粗体和斜体支持

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

我试过一些东西：

that.checkFontData=函数（fontList）
{var test=$（$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910”）；
$（'body'）。追加（测试）；
对于（变量i=0，iMax=fontList.length；i

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

接下来，我想用canvas元素来检测这一点，但是，唉，firefox甚至没有在画布中呈现斜体文本，所以这一想法很糟糕

---

您有什么建议？

使用Font.js，您可以更可靠地访问用于计算的字体度量

我已经在JSFIDLE中测试了您的代码，它确实为自然网络字体（如

Georgia

和

Arial

）提供了不同的大小，但不适用于外部加载字体（如

Snowburst One

）

经过一些研究，我发现对于

@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  );
}

test.css（'fontFamily'，'sans serif'）；
var defaultWidth=test.outerWidth（真）；
对于（变量i=0，iMax=fontList.length；i

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

---

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

要检测是否支持加粗和斜体，可以将文本转换为图像并进行比较

方法是：

创建

canvas

如下（无需将其附加到DOM）

在

画布中绘制文本

将画布转换为图像（这里我使用的是

png

）

比较图像的base64字符串

关于

画布

：

接下来，我想用canvas元素来检测这一点，但是，唉，firefox甚至没有在画布中呈现斜体文本，所以这一想法很糟糕

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

（此演示还测试了谷歌字体

雪暴一号

）

function detectBoldItalic（字体）{
//创建画布
var canvas=document.createElement（'canvas'）；
画布宽度=1000；
高度=30；
var context=canvas.getContext（“2d”）；
var test={}，results={}；
//违约
context.font=“正常16px a基本大小写字体”；
填充文本（“abcdefghijklmnopqrstuvxyzabcdefghijklmnopqrstuvxyz12345678910”，10,20）；
var-standard=canvas.toDataURL（“image/png”）；
setTransform（1,0,0,1,0,0）；
clearRect（0，0，canvas.width，canvas.height）；
//启动测试
对于（var i=0；i

OCR，如果真的很重要的话。在我看来，像P1nGu1n这样的硬编码结果是最好的、最符合逻辑的解决方案。大概你可以控制自己的字体

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