CODEWITHSUNDEEP
csspositionfont-faceweb-operating-system
Phillip-juan
Phillip-juan

Reputation: 546

Embedded font position differs on windows and mac osx browsers

Below is my embedded font code

@font-face {
    font-family: 'futura';
    src: url('../fonts/Futura_CondensedMedium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

And then I'm using the font like so:

#percentage
{
    position:absolute;
    top:90px;
    font-family:futura, Arial, sans-serif;
    font-size:700px;
    line-height:700px;
    font-weight:bolder;
    color:#87847b;
    z-index:2;
    display:inline-block;
}

I only added the kine-height to see whether it makes a difference, but found that it does not.

My problem is that everything looks perfect in all window browsers, but found that the top position differs in all mac browsers. It is out by about 50px.

I have read other answers that state the reasons for this, but how can this issue be fixed?

Upvotes: -1

Views: 115

Answers (1)

Phillip-juan
Phillip-juan

Reputation: 546

I found a solution.

I check the Operating System to set the position:

if(navigator.platform.match('Mac') !== null) {
    $('#percentage').css('top', '-30px');
}

Although this might be a workaround.

Upvotes: 0

Related Questions