1

我在使用以下代码测量我包含在 CSS 中的字体高度时遇到问题：

    measureFontHeight3: function(font)
    {
        var left = 0;
        var top = 0;
        var height = 50;
        var width = 50;

        // Draw the text in the specified area
        var canvas = ig.$new('canvas');
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext('2d');
        ctx.font = font;
        ctx.textBaseline = 'top';
        ctx.fillText('gM', 0,0);

        // Get the pixel data from the canvas
        var data = ctx.getImageData(left, top, width, height).data,
            first = false, 
            last = false,
            r = height,
            c = 0;

        // Find the last line with a non-white pixel
        while(!last && r)
        {
            r--;
            for(c = 0; c < width; c++) 
            {
                if(data[r * width * 4 + c * 4 + 3]) 
                {
                    last = r;
                    break;
                }
            }
        }

        // Find the first line with a non-white pixel
        while(r)
        {
            r--;
            for(c = 0; c < width; c++) 
            {
                if(data[r * width * 4 + c * 4 + 3]) {
                    first = r;
                    break;
                }
            }

            // If we've got it then return the height
            if(first != r) 
                {
                    var result = last - first;
                    console.log("3: " +result);
                    return result;
                }
        }

        // We screwed something up...  What do you expect from free code?
        return 0;
    },

当我测量系统已经安装的字体时，该功能是相当准确的，但是当我尝试测量我已包含在 CSS 文件中的字体时，测量不起作用，即测量错误。

是因为新画布无法“看到”新字体还是有其他问题？

4

1 回答 1

1

可能是因为您想在完全加载之前测量字体吗？

在我的示例中，它似乎工作正常：字体示例

于 2012-08-02T08:16:12.783 回答