<style>
@font-face
{
font-family : 'Avenir';
src : url("/fonts/Avenir999.otf");
}
p.price a span
{
/*font-family : 'Avenir';*/
font-size : 45px;
color: #889900;
}
</style>
<p class="price" style="border:1px solid red;">
<a href="#"><span>this text is positioned above the center of the red box if the //font-family is uncommented.</span></a>
</p>
Once again, the font appears to be correctly detected and everything works smoothly. When I apply the following style:
p.price a span
{
font-size : 45px;
color: #889900;
}
the display is perfect. However, when I introduce the font-face declaration like so:
p.price a span
{
font-family : 'Avenir';
font-size : 45px;
color: #889900;
}
the font style changes (which is good), but it shifts upwards almost out of the 1px solid red rectangle. Why does this happen? Is there a way to correct it? The issue arises solely from the font usage; no padding or margin adjustments have been made.
This discrepancy is present in Chrome, whereas Firefox displays the content properly.