Home Page
  • December 04, 2024, 03:49:56 pm *
  • Welcome, Guest
Please login or register.

Login with username, password and session length
Advanced search  

News:

Official site launch very soon, hurrah!


Author Topic: Font size hack for Mac Web Browsers  (Read 15319 times)

Dakusan

  • Programmer Person
  • Administrator
  • Hero Member
  • *****
  • Posts: 550
    • View Profile
    • Dakusan's Domain
Font size hack for Mac Web Browsers
« on: August 05, 2013, 01:30:59 pm »


Mac renders fonts differently than windows, which is a problem when trying to make cross-system compatible web pages. I've read in many places that using "em" instead of pixels fixes this problem, but sometimes using pixel based measurements is required for a project.

I found when testing a recent project's web page out on Apple's OSX that no matter what browser I used, the fonts were always 2px bigger than on windows, which threw off my layouts. So I used the simple JavaScript solution below (jQuery required). Note that this assumes all font sizes are in pixels. It might not hurt to add a check for that if you mix font size types.


$(document).ready(function() {
   if(/Macintosh/.test(navigator.userAgent))
      $.each(document.styleSheets, function(Indx, SS) {
         var rules=SS.cssRules || SS.rules;
         for(var i=0;i<rules.length;i++)
            if(rules[i].style && rules[i].style.fontSize!='')
               rules[i].style.fontSize=(parseInt(rules[i].style.fontSize, 10)-2)+'px';
});
Logged