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

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 или перезагрузки документа. И с этого момента дальше все окей, больше не повторяется. В чем дело может быть?

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

Ссылка

←	Странная ошибка в django admin.

JavaScript/jQuery Как вставить значение datepicker в href

→

~~xsektorx~~

~~Deathstalker~~ ★★★★★
(04.04.14 20:10:21 MSK)

Ответ на: комментарий от Deathstalker 04.04.14 20:10:21 MSK

а я-то чо?

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

~~xsektorx~~ ★★★
(04.04.14 20:35:54 MSK)

Ответ на: комментарий от xsektorx 04.04.14 20:35:54 MSK

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

~~xsektorx~~ ★★★
(04.04.14 20:37:28 MSK)

Ссылка

WinXP без 5 минут труп.

Deleted
(04.04.14 21:05:50 MSK)

Ответ на: комментарий от Deleted 04.04.14 21:05:50 MSK

некроманты с тобой не согласны

~~xsektorx~~ ★★★
(04.04.14 23:39:10 MSK)

Ответ на: комментарий от xsektorx 04.04.14 23:39:10 MSK

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

Deleted
(04.04.14 23:43:14 MSK)

Ссылка

Ответ на: комментарий от Deathstalker 04.04.14 20:10:21 MSK

~~xsektorx~~

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

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

Не могу так.

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

varchar ★
(06.04.14 16:30:10 MSK) автор топика

Ответ на: комментарий от varchar 06.04.14 16:30:10 MSK

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

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

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

Vit ★★★★★
(06.04.14 16:50:16 MSK)

Ответ на: комментарий от Vit 06.04.14 16:50:16 MSK

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

varchar ★
(06.04.14 18:36:04 MSK) автор топика

Ответ на: комментарий от varchar 06.04.14 18:36:04 MSK

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

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

Чем woff делали?

Vit ★★★★★
(06.04.14 19:50:30 MSK)

Ответ на: комментарий от Vit 06.04.14 19:50:30 MSK

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

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

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

varchar ★
(06.04.14 20:19:34 MSK) автор топика

Ответ на: комментарий от varchar 06.04.14 20:19:34 MSK

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

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

Vit ★★★★★
(06.04.14 21:34:10 MSK)

Ответ на: комментарий от Vit 06.04.14 21:34:10 MSK

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

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

varchar ★
(06.04.14 22:41:37 MSK) автор топика

Ответ на: комментарий от varchar 06.04.14 22:41:37 MSK

Вспомнил: https://github.com/fontforge/fontforge/issues/926

Vit ★★★★★
(06.04.14 23:56:39 MSK)

Ответ на: комментарий от Vit 06.04.14 23:56:39 MSK

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

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

varchar ★
(07.04.14 01:42:57 MSK) автор топика

Ответ на: комментарий от varchar 07.04.14 01:42:57 MSK

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

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

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

Vit ★★★★★
(07.04.14 05:19:10 MSK)