Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Неверный рендер шрифтов

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

nikomoblack

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте!
Столкнулся с проблемой рендера шрифтов на сайте bb.arbitrsud.com
Импорт происходит верно практически во всех браузерах, но рендер хромает - буквы пляшут по высоте, жирности и межбуквенному расстоянию.
Используются шрифты Hair, Kabel и Avant. Последовательно импортируются eot, otf, woff, ttf.
На моем маке все шрифты отображаются идеально во всех маковских браузерах: Safari, Chrome,  Opera, Firefox, однако если запустить сайт на Windows-платформах, то начинается кошмар.
 
В чем может быть проблема?
 
Спасибо за помощь!)

Всего записей: 29 | Зарегистр. 07-10-2012 | Отправлено: 19:14 21-10-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
nikomoblack

Цитата:
буквы пляшут по высоте, жирности и межбуквенному расстоянию.

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

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 20:47 21-10-2013
ZI_DAN



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Насколько я знаю, эту проблему полностью решить никому не удалось. Дело в том, что каждый браузер рендерит шрифты так, как ему вздумается (по крайней мере в Windows). Например, Firefox заметно утолщает текст, у Chrome проблемы со сглаживанием большинства шрифтов и т. д. и т. п. Кроме того, многое зависит от параметров, которые были установлены при конвертации шрифта в eot, otf, woff, svg. Также на отображение могут влиять настройки и версия ОС.
 
Если нужен Pixel Perfect, то есть единственный вариант — картинка. Однако это очень плохой вариант (практически неприменимый в современном сайтостроении).
 
Честно говоря, не понимаю смысл вёрстки на Маке, т. к. 90% посетителей будут смотреть сайт из Windows (только лишние сюрпризы потом будут). В данном случае шрифты выглядят уж слишком фигово в большинстве браузеров. Что можно сделать: поиграться с параметрами экспорта шрифтов, а точнее попробовать несколько различных конвертеров. Какой-нибудь из конвертеров должен дать более приемлемый результат (я обычно использую fontsquirrel.com, но нужно уметь его настраивать).
 
Теперь отдельно про Chrome. В Windows он всё равно плохо сглаживает шрифт в определённом диапазоне кеглей. Это можно исправить, но придётся поплатиться производительностью. Дело в том, что Chrome неплохо рендерит svg-шрифты. Чтобы он подцепил именно svg, подключать гарнитуру нужно, например, в таком порядке:
 
@font-face
{
    font-family: 'PT_Serif_Caption';
    src: url('Fonts/PT_Serif_Caption.eot');
    src: url('Fonts/PT_Serif_Caption.eot?') format('eot'),
          url('Fonts/PT_Serif_Caption.svgz') format('svg'),
          url('Fonts/PT_Serif_Caption.woff') format('woff'),
          url('Fonts/PT_Serif_Caption.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 
Вся печаль в том, что svg-шрифты занимают гораздо больше места по сравнению с остальными. Поэтому принудительный рендеринг svg-шрифта порой заметно замедляет загрузку страницы.
 
И последний совет. Некоторые шрифты подключены через Google Fonts. Очень не рекомендую этого делать, т. к. там какие-то долбанутые настройки в файлах шрифтов, что особенно видно в Chrome. Т. е. в последний раз я попробовал подключить шрифт Play через Google Fonts и увидел дичайшие искажения. В итоге просто скачал ttf-файл из Google Fonts и прогнал его через fontsquirrel.com. Результат получился вполне приемлемый во всех браузерах (даже без svg).

Всего записей: 629 | Зарегистр. 17-11-2010 | Отправлено: 05:37 23-10-2013 | Исправлено: ZI_DAN, 05:58 23-10-2013
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Неверный рендер шрифтов


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru