The introduction of @font-face in CSS3 allows web designers to use fonts that look the same across all browsers. That is what I thought until trying it out with the following code in jsFiddle:

HTML:

<div>
    The_Quick_Brown<br>
    Fox_Jumps_Over<br>
    The_Lazy_Dog
</div>

CSS:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

div {
    display: block;
    width: 496px;
    height: 86px;
    font-size: 1.3em;
    font-family: 'Open Sans';
    font-style: normal;
    margin: 0;
    border: 0;
    padding: 0;
    background: cyan;
    letter-spacing: 1.44em;
    line-height: 1.44;
    overflow: hidden;
}

This is the view from Firefox 12.0. Take note of the partially obscured 'o' in 'brown', the position of 'g' in 'dog' and the underscore '_' at the bottom edge.

This is the view from Google Chrome 19.0.

Despite explicitly setting letter-spacing and line-height for the same font, why are the results still different?