問題描述
css @font‑face 不會在所有瀏覽器中垂直對齊文本 (css @font‑face doesn't align text vertically across all browsers)
I must have went through every page of google but haven't found the solution yet. I have a custom font that I'm using through css font‑face. The font adds extra padding on the bottom depending on the browser and OS that I am using. The picture below shows an example with mac being on the left and windows on the right. It looks correct on the right (in windows) and i want it to be the 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 is located at http://jsfiddle.net/ZDh5h/
Here is what I already know won't work from my research.
- line‑height adds padding to the top and bottom so the extra padding on the bottom remains.
- using different extensions such as .otf or .ttf also doesn't work. Just produces the same results
- changing the font‑size also doesn't really do anything
I use this font a lot through out the site and don't really want to add different CSS sheets for mac vs windows. If anyone knows anyway to fix this without having javascript add extra padding I will be very grateful.
Thank you.
參考解法
方法 1:
See http://www.w3.org/TR/CSS2/visudet.html#propdef‑line‑height
normal
Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as . We recommend a used value for 'normal' between 1.0 to 1.2. The computed value is 'normal'.
I think the behaviour you observe comes from different "reasonable" values across browser as normal is the default line‑height value.
So specify your value (say line‑height: 1.5em;) to get rid of the differences.