Custom font looks different (above) on Mac OS X

Question

I use a special font. The font works fine on my Windows PC, but not on my Mac (Yosemite OSX). As you can see in the pictures, the font is slightly higher on Mac than on Windows. The same thing in all browsers.

I am using border-top in the picture ... you can clearly see the problem. The whole website has a slightly higher font than usual, how can I fix it?

regular font on windows / mac

custom font in windows

custom font on mac

CSS code:

@font-face {
    font-family: "Lovelo Black";
    src: url('../fonts/lovelo_black.otf') format('opentype');
    src: url('../fonts/lovelo_black.ttf') format('truetype');
    src: url('../fonts/lovelo_black.eot') format('eot');
    src: url('../fonts/lovelo_black.svg') format('svg');
    src: url('../fonts/lovelo_black.woff') format('woff');
}

Answer 1

http://www.fontsquirrel.com/tools/webfont-generator is one of the features.

: Rendering: Fix Vertical Metrics ( ):

, ttf.

( FontCreator):

​​ :

ccs , , , . , , .

, Typekit.net css ( Typekit base64 css) OSX Chrome Win Chrome, base64 . , -, , - .

, , CSS, .

, FontSquirrel . , :)

Answer 2

. ( ), .

. OSX , - . "" OSX.

, -, javascript/css, .

OSX , . Safari Chrome Opera -webkit-font-smoothing: antialiased; Firefox -moz-osx-font-smoothing: grayscale;.

, . , - (codepen):

#div1 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: #999 0.1px 0px 0px, #999 -0.1px 0px 0px;

  background-color: black;
  width: 100px;
  height: 40px;
  color: white;
  line-height: 40px;
  text-align: center;
  font-family: 'Open Sans';
  font-size: 16px;
}

text-shadow #999 0.1px 0px 0px , #999 -0.1px 0px 0px; - . , . , text-shadow #fff (, Win FF), , .

"" , OSX, Windows. Windows Linux *-font-smoothing , - .

9 . :

( "":

: , . , , -, . -, -. text-shadow .

Answer 3

, , OS, , , - , . Google Fonts, , , . .

If you want to determine which OS the end user is accessing your site for, you can use the javascript / jQuery bit to detect this. Then, with a little hack, you can apply styles to each OS.

Javascript w / jQuery

if (navigator.userAgent.indexOf('Mac OS X') != -1) {
    $("body").addClass("mac");
} else {
    $("body").addClass("pc");
}

CSS

.mac h1 {
    font-family: "Lovelo Black";
    //your mac specific styles
}

.pc h1 {
    font-family: "Lovelo Black";
    //your windows specific styles
}

Essentially in your CSS, you need to prefix all styles, including the font, with the class you applied to body.