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.

different browser view

@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

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -