Trouble measuring an externally included font

Question

I am having problems measure the height of a font which I have included with CSS using this code:

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

When I measure a font which the system already has installed, the function is quite accurate, but when I try to measure a font which I have included in a CSS file, the measurement does not work, i.e. it measure wrongly.

Is it because of the new canvas not being able to "see" the new font or is something else wrong ?

What is jsfiddle.net ? If I measure a font called "30 pt Trebuchet MS", it shows the correct height, but if I include the font called Visitor in a CSS file and try to measure that one, it gives me an incorrect height. It almost seems like that the canvas is not using the Visitor font, but instead a standard font. — user1069703, Aug 02 '12 at 06:48
[jsfiddle.net](http://jsfiddle.net) is a playground for javascript / html / css with save & share abilities, it can be use anonymously, take a look it's very useful for sharing issues like this one, since others will be able to reproduce the SAME issue. — Julien Ch., Aug 02 '12 at 08:16

Julien Ch. · Accepted Answer · 2012-08-03T08:13:35.463

1

Could it be because you want to measure the font before it's been fully loaded ?

In my example it seems to be working fine : Font example

edited Aug 03 '12 at 08:13

answered Aug 02 '12 at 08:16

Julien Ch.

1,231
9
16

Thank you for putting the code in jsFiddle. I can see that I sometimes when drawing the font in JSFiddle get the correct font and sometimes I do not. But the method returns a different height dependant on whether the correct font is loaded or not. This clearly tells me that I am trying to measure the font before it has been fully loaded. Is there a way that I can check whether the font has been fully loaded or not ? – user1069703 Aug 03 '12 at 14:49
take a look [here](http://stackoverflow.com/questions/4383226/using-jquery-to-know-when-font-face-fonts-are-loaded) or [there](http://stackoverflow.com/questions/4383226/using-jquery-to-know-when-font-face-fonts-are-loaded) – Julien Ch. Aug 03 '12 at 15:29

Trouble measuring an externally included font

1 Answers1