Jump to content
  • 0

IE6-8 Рендеринг шрифтов

Ateiri

Asked by Ateiri,

 Share

Question

Ateiri Explorer

Ateiri

Posted
Posted

Здравствуйте, дамы и господа!

 

Сразу с «жалоб». Уже не первый месяц и не в первом проекте сталкиваюсь с проблемой рендеринга шрифта в IE6-8.

Шрифт абсолютно по-разному отображается в IE6-8 и в IE9+/Chrome и т.п.

 

Перечитал массу статей, свожу все к кодировке UTF-8, но больше меня интересует решение данной проблемы.

Если кто-нибудь знает ответ или же имеет схожую проблему, добро пожаловать на обсуждение!

 

P.S.: На скриншотах обратите внимание на ширину букв. Шрифт Verdana.

 

https://www.dropbox.com/s/qulo4xj97qcym2u/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202013-12-10%2010.28.22.png

https://www.dropbox.com/s/b8vzs3o64ubbve3/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202013-12-10%2010.28.30.png

https://www.dropbox.com/s/u4izw4wd7kdie65/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202013-12-10%2010.28.37.png

 

з.ы.: надеюсь администрация простит меня за прямые ссылки =P

Link to comment
Share on other sites

41 answers to this question

Recommended Posts

  • 0
npofopr Trainee

npofopr

Posted
Posted (edited)

Да кодировка тут не причем...

А что вы хотите то? 

В этих массе статей наверняка вы должны были понять, что толком ничего не сделать. Кроме как использовать более понятный для всех систем шрифт.

И вы еще видимо не тестировали в разных Операционных системах. Везде может быть все по разному, в том числе сглаживание.

Edited by npofopr
Link to comment
Share on other sites
  • 0
Ateiri Explorer

Ateiri

Posted
  • Author
Posted (edited)

Посмотрите на то как прорисована цифра 4 в номере. Посмотрите какой ширины текстовый узел c почтой в разных IE.

 

Конечно я идеалист и желаю исправить все все все))) 

В интернете нашел один табличный сайт и так же решил его проверить на ie6-9. Шрифт не изменился. Кодировка windows-1251.

 

Кодировка действительно не имеет отношения, это уже факт. Остается «винить» (если так вообще можно сказать) блочную верстку (vs табличную).

 

Попробую проверить текст в табличной, блочной верстках.

Edited by Ateiri
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
блочную верстку (vs табличную).

 

Это точно ни при чем. Другое дело, что среди «табличных» сайтов гораздо больший процент не имеет доктайпа. А без доктайпа страницы рисуются в Quirks mode, в котором все кошки серы все IE — пятые.

 

В 9-м IE нецелые размеры в пикселях стали округляться по-другому.

 

Кстати, вот ответ на вопрос, должны ли сайты абсолютно одинаково выглядеть во всех браузерах.

  • Like 1
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
ломает ie6-8

Это что-то новое. Что именно «ломается»? И какой размер шрифта указан, в каких единицах?

 

Писать без доктайпа тоже не могу)

И не надо! Надо разобраться в причине проблемы. Хотя вообще в 2013-м вполне достаточно идеального отображения в IE9+ и всём современном, а в IE8- достаточно, чтобы текст просто читался. Уже доля мобильных браузеров в разы больше, чем старых IE.

  • Like 1
Link to comment
Share on other sites
  • 0
Ateiri Explorer

Ateiri

Posted
  • Author
Posted (edited)
Это что-то новое. Что именно «ломается»? И какой размер шрифта указан, в каких единицах?

Под «ломается» имеется ввиду, что шрифт не соответствует отображению всех остальных браузеров, включая IE 9+.

 

Шрифт Verdana, размер пробовал и в pt/px/em задавать, результат тот же.

Как уже писал, в QM IE6-9 работает нормально, но QM сама по себе штука мерзкая.

 

 

 

И не надо! Надо разобраться в причине проблемы. Хотя вообще в 2013-м вполне достаточно идеального отображения в IE9+ и всём современном, а в IE8- достаточно, чтобы текст просто читался. Уже доля мобильных браузеров в разы больше, чем старых IE.

 

Цель: сверстать кроссбраузерно. IE начиная с версии 6.0.

 

В общем проблема не решаема. Все сайты с якобы нормальными шрифтами были в quirk mode, а так как такое «мерзкое» чудо я себя позволить не могу, то и единственным решением выравнивания ширины текстового узла будет letter-spacing для ie6-8

 

Всем спасибо.

Edited by Ateiri
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
кроссбраузерно

!= pixel-perfect

 

Зависимость верстки от ширины текста === некроссбраузерно. Потому что есть еще Мак и Андроид (с прочими Линуксами), где рендеринг шрифтов отличается по-настоящему. Кроссбраузерная верстка обязана не ломаться даже в этом случае, поэтому всегда должен быть запас.

 

Но вообще хотелось бы увидеть это чудо. По логике, отличаться при правильном доктайпе должен как раз IE9+...

Link to comment
Share on other sites
  • 0
Ateiri Explorer

Ateiri

Posted
  • Author
Posted

 

кроссбраузерно

!= pixel-perfect

 

Зависимость верстки от ширины текста === некроссбраузерно. Потому что есть еще Мак и Андроид (с прочими Линуксами), где рендеринг шрифтов отличается по-настоящему. Кроссбраузерная верстка обязана не ломаться даже в этом случае, поэтому всегда должен быть запас.

 

Но вообще хотелось бы увидеть это чудо. По логике, отличаться при правильном доктайпе должен как раз IE9+...

 

 

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

white-space:nowrap;

Так как у меня именно эмулятор IE, масштабирование мне недоступно, но теоретически ссылка может вообще выйти за пределы нашего навигационного блока. В этом то вся и лажа.

 

В любом случае хочется услышать следующее, мое решение имеет место или все же есть иные, более безопасные способы? (на будущее).

Link to comment
Share on other sites
  • 0
npofopr Trainee

npofopr

Posted
Posted
ссылка в меню переползает на вторую строку (в данном примере переползания нет). Переползание происходит из-за нехватки места
Может просто начать верстать без пикселей, а более гибко?

У вас шрифты совсем не причем, вы скорее всего все блоки верстаете с указанием конкретных размеров. 

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

А насколько жестко требование точного соответствия левого отступа? Нельзя ли просто «прибить» меню к правому краю (ограниченному максимальной шириной)? На мой взгляд, при таком дизайне это просто напрашивается и было бы намного логичнее...

Link to comment
Share on other sites
  • 0
npofopr Trainee

npofopr

Posted
Posted

В общем хотелось бы увидеть вашу верстку, скорее всего у вас более глобальные проблемы :-) 

И странно, что с жесткими размерами у вас проблемы только со шрифтами :-)

  • Like 1
Link to comment
Share on other sites
  • 0
Zverushka Explorer

Zverushka

Posted
Posted

Да это все фигня. Вот как на маке шрифты съезжают - вообще жуть. Может по вертикали на 3-4 пикселя уехать и оказаться вертикально не по центру, а внизу и это уже реально глаза напрягает, но, ничего поделать нельзя. Это нормальное поведение.

  • Like 1
Link to comment
Share on other sites
  • 0
d0ublezer0 Explorer

d0ublezer0

Posted
Posted

Про старые браузеры кстати.. Помним, да, что IE8 - максимум для Windows XP.

C апреля 2014 XP полностью снимают с поддержки. Пришло нам тут письмо от Майкрософт Рус, с рекомендациями что "если мол, хотите соответствовать требованиям закона о сохранности личных данных, то обновитесь на сертифицированные системы, типа Windows 7 или 8" . А там - минимум девятка.

Может и баян, но вдруг кто не знает.

Link to comment
Share on other sites
  • 0
d0ublezer0 Explorer

d0ublezer0

Posted
Posted

Продолжу в вашей теме, если не возражаете?

 

PT Serif Caption от Google Webfonts в IE7-8 отображается на странице не так, как ожидалось:

 

dUFH0zw2.jpg

 

Почему так?

 

Это всё при том, что заявлено:

 

What browsers are supported?

The Google Fonts API is compatible with the following browsers:

  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Opera: version 10.5+
  • Microsoft Internet Explorer: version 6+

 

В "нормальных браузерах современных версий" тоже всё хорошо.

Link to comment
Share on other sites
  • 0
npofopr Trainee

npofopr

Posted
Posted

google от IE9 то отказался, а вы про ie6 все говорите.

И ведь в IE6 отображается, а то, что по другому рендерит, ну дак это вопрос к IE, + винде с ее сглаживаниями.

Наверно так.

Link to comment
Share on other sites
  • 0
Vin Explorer

Vin

Posted
Posted

Реально, гораздо больше людей на других ОСях (включая мобильные) сидят, чем на IE6, IE7, IE8 вместе взятых. А там, как уже писали, рендеринг шрифтов отличается гораздо сильнее. Но, опять же, при грамотном дизайне и коде ничего ужасного из-за это не происходит.

  • Like 1
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
Win7 идёт IE8

"Искаропки" да, но честная винда обязана тут же предложить юзеру приоритетно обновиться до уже, видимо, 11-го. Вот с вистой, да, грустно, но сколько там ее осталось...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Боков Глеб
      Баг IE: контейнер заканчивается раньше дочернего центровщика
      By Боков Глеб
      Компоновка: типичный блок .Wrapper, который имеет ширину 100% от ширины окна, и центровщик (margin: 0 auto;) с указанными min-width и max-width:
      В IE следующий баг: Wrapper почему-то заканчивается раньше, чем надо, а центровщик с содержимым перекрывает следующую такую же компоновку ниже:

      Такой баг был замечен уже практически на свёрстанном лендинге, а потому было очень трудно сделать минимальный работающий пример. Я постарался убрать весь лишний HTML для данного примера, но CSS тоже самое было сделать очень трудно.
      Если Вы запустите пример в IE (ещё раз повторюсь, что в других браузерах всё нормально), то увидите следующее:

      На StackOverflow уже несколько недель никто не может найти решение (оно и понятно: в разметке-то ошибок нет, это просто баг IE, но с ним надо что-то делать, потому что пользователи IE, увы, ещё превышают критическую отметку 10%). Вот только что удалось выяснить: если контейнеру .FlexPageLayoutWithFixedHeaderAndBottomFooter-Wrapper для основного содержимого (под header) задать min-height вместо height, то отображение станет нормальным. К сожалению, такое решение не годится потому, что исчезнет "прилипание" header-а кверху. Можно, конечно, прилепить его и другими способами, но хотелось бы избежать задания его абсолютной высоты, так как это противоречит концепции адаптивной вёрстки.
    • мурамаса
      Проблема со шрифтом в div блоке с тегом <p>
      By мурамаса
      <div class="center-menu"> <div class="center-bar-one"> <h1> Новости </h1> <p>Сегодня 21 января было совершено нападение на одного из наших брокеров, прямо у дверей московской фондовой биржи. Нападающий выскочивший из за угла был одет в черный костюм с красным галстуком и в маске напала на олега олежина после чего скрылся и его след простыл. Олежин был немедленно госпитолизирован, мвд по московской области ведет расследование.</p> </div> </div> Вот хтмл код этого элемента
      .center-bar-one { float: left; width: 150px; height: 200px; font-size: 11px; color: blue; } Когда я прописываю размер шрифта и в коде присутствует тег <p>, то размер шрифта не меняется. Если прописать например цвет, то никаких проблем нет. Когда убираю тег <p> то шрифт меняется. В чем дело? помогите
    • serzh82saratov
      Прилипание блока к видимым границам
      By serzh82saratov
      Всем привет! Я тут новичок, не пинайте сразу если что.
      Требуется аналог position sticky для IE (в режиме совместимости с 7).
      Надо чтобы в одну строку текст с кнопками и с пунктирной линией проходящей под ними посередине в любой ситуации прилипал к левой и правой границе окна, то есть чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально. Также при растягивании окна, текст за которым следуют кнопки находились слева на 20%.

      То есть если сдвинуть скролл, строка с красной полоской должна остатся на месте, если растянуть окно, то красная полоса растягивается, "( Title )" немного сдвигается вправо.
      Надеюсь более менее объяснил, заранее спасибо.
      Забыл сказать, таких линий на форме 10 - 20 штук.
    • Koss
      IE не отображает SVG
      By Koss
      Здравствуйте! 
      Проблема следующая: есть некий корпоративный портал (уже довольно древненький и написанный задолго до меня), с него есть обычная ссылка <a> на карту, которая открывается в новой вкладке. Карта нарисована как svg и вставлена непосредственно в саму страницу через тег <svg> (вновь открываемую). Проблема в том, что при переходе по ссылке непосредственно с портала, IE11 не отображает svg и не корректно отображает стили для блоков с текстом. Все остальные браузеры отображают все полностью и правильно. Самое главное, что отдельно (правда на другом веб-сервере [может это важно]) эту страницу с картой IE11 отображает просто замечательно. Но стоит обратиться к ней через ссылку с главной страницы портала, не работает. Предполагаю, что проблема непосредственно с порталом. Где-то какие-то стили не те, или еще что... Может кто поопытнее подскажет, в какую сторону хоть копать...
      При написании портала использованы:      - jquery.fancybox-1.3.4.css
                                                                                                   - AC_RunActiveContent.js
                                                                                                  - swfobject_modified.js
                                                                                                  - jquery-1.4.3.min.js
                                                                                                  - jquery.easing-1.3.pack.js
                                                                                                  - jquery.fancybox-1.3.4.js
                                                                                                  - jquery.fancybox-1.3.4.pack.js
      Может где-то в них проблема?
       
    • xek
      Проблема со шрифтами
      By xek
      Добрый день!
      Подгружаю шрифты с google fonts, имя шрифта Fira Sans (и причем он у них отображается корректно), но когда я его подгружаю он выглядит так как будто избитый.
      Привожу 2 скриншота:
      1. Как выглядит шрифт на google fonts

      2. Так выглядит у меня

      Почему так получается?
      Все эти манипуляции я провожу в браузере Firefox.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept