javascript - Firefox rendering of OpenType font does not match the font specification -

i loading opentype webfont open sans via google fonts api / css.

in both chrome 43 (linux+windows) , internet explorer 11 (windows) browser renders text specified in font. however, in firefox 38.0.5, text width and/or spacing rendered differently characters. font variants @ default value ("normal").

as example, can use characters 1, a, b, , i. open sans "unitsperem" 2048. therefore, @ font size of 18.0px, width of 30 characters of each of above characters should follows based on 1/u * p * c * w u = 2048, p = 18.0, c = 30, , w advance width of each char (wolfram alpha equation).

 +----------------------------------------+-----------+ | char | font(px) | numchars |  advance  | width(px) | +------+----------+----------+-----------+-----------+ |  1   |   18.0   |    30    |   1171    |  308.76   |    |    |   18.0   |    30    |   1139    |  300.322  | |  b   |   18.0   |    30    |   1255    |  330.908  | |    |   18.0   |    30    |   518     |  136.582  | +----------------------------------------+-----------+ 

this (jsfiddle) uses canvas method measuretext output width in pixels of 30 characters of each of 1, a, b, , i.

chrome text lengths match expected values exactly:

firefox linux text lengths not match of characters except a, after accounting fact firefox not provide subpixel accuracy:

i have confirmed width reported canvas indeed output both chrome , firefox -- following image shows red background, chrome's text in black, , firefox's text in white -- widths match outputs above according gimp "measure" tool. firefox's b , i wide, , 1 narrow:

and side note, firefox windows text lengths not consistent firefox linux -- a , b widths expected, 1 , i still incorrect:

this clean firefox profile default settings , no extensions installed.

can explain going on, , how force firefox render font according font specification?

update: on windows, setting preference gfx.font_rendering.directwrite.enabled true fixes problem (which believe firefox default when hardware acceleration available, setting forces on if hardware acceleration unavailable, such on test vmware system). directwrite has been default in chrome on windows since version 37. linux behavior still unexplained. this blog post explains more directwrite rendering in firefox on windows.

(this answer summarizes main points raised in question comments, bunch of additional research done after question posted.)

for various , complex reasons, not browser/os/font size combinations render screen in same way, nor follow specifications of font. therefore, in general, applications should created in way avoids needing pixel-perfect positioning of text.

subpixel text rendering configuration

some comments on configuring specific browser/os combinations support subpixel text rendering:

windows

• browsers support , enable directwrite (as opposed older gdi method) tend support linear, non-hinted, subpixel text positioning, , therefore able (and do) follow font advance width specifications. includes chrome 37+ , firefox 4+.
  • firefox disables directwrite default when hardware acceleration not available, can enabled via setting config property gfx.font_rendering.directwrite.enabled true.
  • chrome 37+ directwrite on default, can disabled setting flag disable directwrite.
  • internet explorer (9+?) directwrite on default, can disabled setting compatibility mode.

linux

configure display anti-aliasing , sub-pixel text rendering setting fontconfig subpixel rendering (usually via gnome or kde display manager settings, can done manually via fontconfig config files), installing freetype-freeworld (freetype non-free subpixel rendering support), , adding xft.lcdfilter: lcddefault ~/.xresources applications without fontconfig support. set correct type of subpixel rendering based on lcd display type.

• browser behavior seems inconsistent when underlying display supports , configured subpixel rendering.
  • recent versions of chrome (44 tested) appear support linear, non-hinted, subpixel text positioning, , therefore follow font specifications. tested on kde 4.14 rgb subpixel text rendering enabled.
  • firefox (38.0.5 tested) appears non-linear hinted positioning, therefore not follow font specifications, if display configured subpixel rendering. have not identified way force firefox use subpixel text rendering.

mac os/x

no information platform yet.

pixel-perfect positioning

if, despite difficulty, 1 building application requires pixel-perfect text positioning , inspection, there 2 ways go it:

1) canvas or dom-based text width/height measurement: see calculate text width javascript. see font.js mike kamermans (pomax).

2) use of opentype.js determine text dimensions source font, faster method above when works, not work in cases.