cross platform - css @font-face doesn't align text vertically across all browsers -
i must have went through every page of google haven't found solution yet. have custom font i'm using through css font-face. font adds padding on bottom depending on browser , os using. picture below shows example mac being on left , windows on right. looks correct on right (in windows) , want same on mac.
@font-face { font-family: universlight; src: url('http://www.viggi.com/fonts/universltstd-light.otf'); font-weight: normal; font-style: normal; } #button{ font-family: universlight; border: 1px solid black; background: #ccc; }
the code located @ http://jsfiddle.net/zdh5h/
here know won't work research.
- line-height adds padding top , bottom padding on bottom remains.
- using different extensions such .otf or .ttf doesn't work. produces same results
- changing font-size doesn't anything
i use font lot through out site , don't want add different css sheets mac vs windows. if knows anyway fix without having javascript add padding grateful.
thank you.
see http://www.w3.org/tr/css2/visudet.html#propdef-line-height
normal
tells user agents set used value "reasonable" value based on font of element. value has same meaning . recommend used value 'normal' between 1.0 1.2. computed value 'normal'.
i think behaviour observe comes different "reasonable" values across browser normal
default line-height
value.
so specify your value (say line-height: 1.5em;
) rid of differences.
Comments
Post a Comment