Среда, 12 Сентябрь 2012 18:14

Решение проблемы с несоответствием отображения шрифтов в разных операционках

Оцените материал
(1 Голосовать)

Всем профессиональным верстальщикам известна проблема с экранным сглаживанием шрифтов в разных операционных системах. И в таких проблемных местах, как, например, меню, частенько возникают подобные курьёзы (сверху — визуализация меню в Маке, снизу, под сиреневой полосой — тот же кусок сайта в Винде):

Это происходит из-за того, что Мак таким образом сглаживает шрифты, чтобы они казались более насыщенными. Как видите, Arial, если его заключить в <strong></strong> или font-weight:bold, становится слишком жирным, а следовательно, и слишком широким. По-секрету скажу, Линукс ведет себя подобно Маку.  А поскольку наша задача сделать верстку не только кроссбраузерной, но еще и адаптивной ко всем осям, нужно учитывать и этот момент. Решение под катом.

Если вы столкнулись с подобной проблемой, не стоит бить тревогу. Вам нужно сделать четыре дополнительных css-файла под каждую операционку, основного выпилить проблемный участок. Давайте так и сделаем. Предположим, у нас не помещается меню в <div id="mainmenu"> из-за ширины шрифта. Под Виндой все красиво, но стоит только открыть сайт в Маке или Убунте, начинается беспредел. 

Чтобы избавиться, удаляем из основного файла

styles.css

Посмотреть код
#mainmenu {width:580px}

Создаем дополнительные os-fix_win.css, os-fix_mac.cssos-fix_lin.css — для Винды, Макоси и Линухи, соответственно. В них пишем:

os-fix_win.css

Посмотреть код
#mainmenu {width:580px}

os-fix_mac.css

Посмотреть код
#mainmenu {width:605px}

os-fix_lin.css

Посмотреть код
#mainmenu {width:600px}

Закидывайте эти файлы на сервер вместе с основным, в между <head> и </head> втыкайте вот такой код:

Показать/скрыть php код

Посмотреть код
  1. <link rel="stylesheet" href="путь_к_файлу/ 
  2. <?
  3. function opsys_info($agent) {
  4. if ( strstr ($agent, 'Win') ) :
  5. $opsys = "os-fix_win.css";
  6. elseif ( strstr($agent, 'Linux') ) :
  7. $opsys = "os-fix_lin.css";
  8. elseif ( strstr ($agent, 'Unix') ) :
  9. $opsys = "os-fix_lin.css";
  10. elseif ( strstr ($agent, 'Mac') ) :
  11. $opsys = "os-fix_mac.css";
  12. else :
  13. $opsys = "os-fix_win.css";
  14. endif;
  15. return $opsys;
  16. }
  17. $agent = $_SERVER['HTTP_USER_AGENT'];
  18. print_r (opsys_info($agent));
  19. ?>
  20. " type="text/css" media="screen"/>

Смотрите результат. Теперь, в Маке (во всех браузерах) ширина дива с айди mainmenu будет равна 605 пикселям, в любом браузере Винды — 580 пикселей, а в Линуксе, соответственно, 600.

Плюс такого способа в том, что он не зависит от того, установлена у посетителя JAVA или нет. Скрипт исполняется сервером, вам нужно только чтобы ваш сервак умел исполнять php-скрипты :)

Минус в дополнительной нагрузке на сервер, но красота требует жертв, что тут скажешь. Либо меняйте верстку.

И еще один нюанс. Если юзер зашел на сайт ни из-под Винды, ни из Мака, Линукса или Юникса, а, например, из-под Symbian, то сервер покажет ему стили для Винды. Определяется это здесь: else : $opsys = "os-fix_win.css"; 

На этом все. Спасибо за внимание.

 

Прочитано 5291 раз
Твитнуть
Другие материалы в этой категории: « Устанавливаем Zend Optimizer в MAMP

Комментарии   

 
kofrex
0 #1 kofrex 14.11.2012 18:06
способ работает!
при горизонтальной стыковке текстов просто незаменимо!
автору респек! всем, кто столкнулся с проблемй - удачного разрешения!
Цитировать
 

Добавить комментарий

Защитный код
Обновить

joomla 1.7

Не получаются доработки?

Становитесь партнером студии Millor! Быстро и недорого эти ребята помогут решить практически любую проблему.

Хотите подзаработать?

Если да, то вам сюда! Партнерская программа студии MyWebSite. Получи 20% за каждого клиента! Работаем по всей России и СНГ!

Рекламное место свободно.