When I first learned about @font-face in CSS3, I was excited about the prospect of using consistent fonts across all browsers. However, after experimenting with it using the code below on jsFiddle, my expectations were challenged:
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;
}
In Firefox 12.0, there were noticeable differences such as the obscured 'o' in 'brown', the positioning of 'g' in 'dog', and the underscore '_' at the bottom edge.
This is how Google Chrome 19.0 displayed the page.
Despite setting specific values for letter-spacing and line-height, why did the results vary between browsers?