1

My horizontal nav bar and footer look perfect on PC, but when testing on Mac, the font is lifted about 30px above its position in the horizontal nav bar.

After trying every CSS reset and line-height adjustment, what finally worked on Mac made the font drop about 30px below its position in the horizontal nav bar on PC this time.

One Stackoverflow answer mentioned editing the glyph/baseline of a font.

I downloaded a free font editing program and noticed the characters inside of each respective square were lifted as if to have a 40px margin underneath, but I can't adjust the height of the baseline in the program.

Is there a free font manipulation program that will allow me to adjust the glyph/baseline of the font?

I appreciate your time in advance.

Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
william
  • 11
  • 2
  • Which browser(s)? Are you using the same browser on both operating systems, or are you using IE on Windows and Safari on Mac, or something like that? – Steve Jorgensen Feb 23 '16 at 09:08
  • Can you specify a font stack that results in fonts with glyphs having more consistent baselines between the 2 cases? – Steve Jorgensen Feb 23 '16 at 09:11
  • Isn't it possible to send the font throught FontSquirrel's generator with some expert option? http://www.fontsquirrel.com/tools/webfont-generator Also, fiddle2fiddle please :) – biziclop Feb 23 '16 at 09:11
  • @Steve Jorgensen, I used Firefox, Chrome, Safari on Mac, and Firefox, Chrome, IE on PC. – william Feb 24 '16 at 23:52
  • @Steve Jorgensen, As for specifying the font stack, I have never worked with fonts before, I only accessed them. This is the first time I've used the word glyph and baseline. I do know that when I remove the font stack the results are consistent in both systems. When I add the font back and issue returned. – william Feb 25 '16 at 00:09

1 Answers1

1

Try to generate your font via http://www.fontsquirrel.com/, and use the CSS for font-faces it gave you.

If the above does not work for you, try this:

Try to find out with JavaScript if the app is running on Mac. If so, load a new font-fix-mac.css file, where you will put margin-top:30px on all elements where the font is lifted above.

Darko Riđić
  • 459
  • 3
  • 18
  • If I may ask, what do you mean by "app" in this instance? Thanks! – william Feb 25 '16 at 04:34
  • By app I mean you website. – Darko Riđić Feb 25 '16 at 07:13
  • Got it. Since this only happens in Mac, are you saying to make this style only if detected in Mac? Last time I added margin to the top, it looked good in Mac, but on PC the line was 30px below the horizontal nav bar. Is there style that would allow me to only target Mac? Thanks again. – william Feb 25 '16 at 20:45
  • Open up a console in the browser and paste the following there: navigator.platform. what does it output? – Darko Riđić Feb 26 '16 at 00:36
  • It output "MacIntel" – william Feb 26 '16 at 10:09
  • http://codepen.io/anon/pen/BKBXym?editors=1010 Make an mac.css file where you will put all those specific styling for elements that look bad in mac. and add this code to your html and javascript. – Darko Riđić Feb 26 '16 at 13:40