Same font, character spacing and line-height but different results
- by Ben Huh
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?
