LINUX.ORG.RU
решено Форум — Web-development  

Веб-шрифт отображается нормально только со второго раза

 


0

1

Есть шрифт внедрённый в CSS: 

@font-face {
  font-family: 'VideoJS';
  src: url(data:application/font-woff;base64,d09GR......H0ABA==)
  format('woff');
  font-weight: normal;
  font-style: normal;
}
CSS вместе с остальной разметкой попадают в <body> через .innerHTML Рендерит это chromium из node-webkit. Везде нормально всё но не в венде XP... Да, да — вендопроблема, не судите строго, приложение-то кроссплатформенное, под линукс сделанное, тут спрашиваю потому, что знаю тут среди нас есть специалист по веб-шрифтам (с фоткой на аватарке) плиз кастаните кто узнал, в том случае если не злой он :)

Так вот, в виндовс XP (и только в ней) этот шрифт отрисовывается только после перезапуска node-webkit или перезагрузки документа. И с этого момента дальше все окей, больше не повторяется. В чем дело может быть?

Скриншот - до перезапуска или перезагрузки, и после.

★

Последнее исправление: varchar (всего исправлений: 1)

Ответ на: комментарий от xsektorx

алсо, проблема возникала в основном у пользователей с ведроида. и да, там текст вообще не отображался

xsektorx ★★★
()
Ответ на: комментарий от xsektorx

А их скоро съедят вирусы-мутанты из интернета :3

Deleted
()
Ответ на: комментарий от Deathstalker

xsektorx

Спасибо, но не он. Я вспомнил — Vit.

алсо, на работе попался практически такой же косяк у юзера, выпилил шрифт из ксс

Не могу так.

Vit, не встречался с таким поведением? Шрифт то иконочный, твоя тема, может что нибудь подскажешь?

varchar ★
() автор топика
Ответ на: комментарий от varchar

С node-webkit дел не имел.

Можно попробовать шрифт поменять на ttf или svg и сравнить что будет. Вебкит их понимает. SVG можно вместо base64 текстом заенкодить.

Еще на всякий случай проверьте, что коды символов в 2 байта вписываются.

Vit ★★★★★
()
Ответ на: комментарий от Vit

Отлично, с ttf проблемы нет. Спасибо за подсказку. Сам я не сразу попробовал бы, полагая что woff самый предпочтительный и безпроблемный потому что открытый...

varchar ★
() автор топика
Ответ на: комментарий от varchar

Воффка - тупо обёртка с deflate и crc над каждой таблицей ттф. По сути - дополнительная прослойка. Его есть смысл тащить только ради совместимости с промежуточными версиями браузеров и из-за размера (если ttf на сервере не жмется).

В современных движках проще ставить TTF или SVG, в зависимости от того, какое нужно сглаживание.

Чем woff делали?

Vit ★★★★★
()
Ответ на: комментарий от Vit

Woff из Video.js. Там весь набор (.eot, .svg, .ttf, .woff) из которого, для внедрения в css, я было woff выбрал. Есть подозрение, что он не в порядке, т.к. с бутстраповским (также внедрённым) воффкой всё хорошо и с первого раза.

TTF или SVG, в зависимости от того, какое нужно сглаживание

А в чём разница, есть лучше/хуже? Какой взять предпочтительней если размер не важен?

varchar ★
() автор топика
Ответ на: комментарий от varchar

Может быть разница под старыми вендами. Там тонна нюансов с хинтингом. Возможно SVG вам больше понравится для мелких размеров. Попробуйте и то и то, сравните, это ж не долго.

woff по ссылке фонтфоржем сделан. Если не изменяет память, там может быть в контрольных суммах косяк. Попробуйте вот этим https://github.com/fontello/ttf2woff конвертнуть из ttf и заэмбедить. Тогда будет точно ясно.

Vit ★★★★★
()
Ответ на: комментарий от Vit

Будучи сконвертированным вашей тулзой новый woff отображается как надо. Более того, он вышел аж на целых 2 КиБ меньше прежнего, оригинального (2152 против 4228 байт)!

Отрепорчу при случае разрабу Video.js и порекомендую ваш инструмент.

varchar ★
() автор топика
Ответ на: комментарий от Vit

Странно же проявилось у меня. Никакой ошибки в консоль, только в XP, только при первом запуске.

Касательно сравнения ttf с svg, и тут вы правы. SVG смотрится приятней, чётче/резче. С ним спиннер video.js стабилен по осям ХУ, а с ttf подёргивался.

varchar ★
() автор топика
Ответ на: комментарий от varchar

бывают и более эпичные косяки https://github.com/fontello/fontello/issues/255

У хрома похоже (иногда?) для SVG свой рендерер, который мимо системного идет. И как-то они иначе мутят с субпиксеньным сглаживанием. Можно еще пошаманить с css атрибутами типа -webkit-font-smooth (не помню точно, гуглите).

Если есть возможность - проверяйте результат на всех ожидаемых платформах, он может отличаться.

Vit ★★★★★
()
Ответ на: комментарий от Vit

Мда, вебдев — то ещё минное поле :)

Спасибо за подсказки, буду по всякому тестить.

varchar ★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development