font-face шрифты и canvas

[Fairy-Wilbury]

Возникла проблема при подключении шрифтов через @font-face и выводу их на canvas.
Шрифты выводятся, но у одного из шрифтов отдельные буквы получаются значительно бледнее остальных в Firefox, Safari и Internet Explorer. При этом просто в html странице при использовании этого шрифта все нормально. В Chrome и Maxthon вообще все нормально и на canvas и в html.
Что это может быть? Как с этим бороться?
Заранее спасибо!

[kostyanet]

Канвас не "выводит" текст, на нем печатают шрифтами, то есть переводят их в пикселы не на экране, а на картинке которая уже затем идет на экран. Никакого композинга в канвасе нет и даже сглаживания нет. Я полагаю вы печатаете на канвасе не сами, а через какую-то либу, которая возможно пытается там что-то компоновать. Так вот есть такое понятие в шрифтовой науке - хинтинг. Это привязка контура символа к пиксельной сетке. Значение которого повышается пропорционально уменьшению кегля шрифта (высоты).

Если штрих занимает 1 пиксель то сдвигом контура на 0.5 пикселя можно получить из болд - нормал, а из нормал - х нанэ. "Удачно" сдвинув по двум координатам можно добиться почти полного растворения символа в квантованном просранстве пикселей.

В общем это либо либа так рендерит, либо увеличивайте кегль.

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

[danik.js]

Сконвертил в веб он-лайн - получил полное гавно. Все хинты слетели к чертям.

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

В общем это либо либа так рендерит

Вообще-то все это работает без всяких либ. Достаточно загрузить шрифт через @font-face. Вот только я хз как определить момент, когда шрифт загрузился.
Fairy-Wilbury, сделайте скриншот с проблемой что-ли.

[Fairy-Wilbury]

kostyanet,

Я использую ocanvas библиотеку для удобства работы с canvas. Но ведь проблема только в определенных браузерах... Не во всех.

danik.js,
Вот скриншот в Firefox:

[Fairy-Wilbury]

Проверенно - на чистом js без оCanvas - то же самое. Проблема почему-то с заглавной S в первую очередь, но и некоторые другие буквы выглядят более блеклыми.

[Fairy-Wilbury]

Неужели никто не сталкивался ни с чем подобным?..
В интернете тоже нет нигде ответа, ни на stack overflow, ни просто в поиске не удалось найти... = (

[Aetae]

Canvas со шрифтами говняно работает, да ещё и по-разному от браузера к браузеру, смиритесь.
Попробуйте применить к canvas css:

image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;

Это совсем не то что нужно, но вдруг поможет.)

Ещё видел вариант: отрисовать текст крупным кеглем(2х, 3х итд), а затем искусственно уменьшить размер canvas...
http://johnvalentine.co.uk/subpixel-html5-canvas.htm

[Fairy-Wilbury]

Да как-то не вариант - смиряться...

Но нет, css не помогает = ((

Уменьшать пробовала уже - тоже не помогает. = (

[Aetae]

А текст точно обычным html поверх наложить никак?)

[Fairy-Wilbury]

Aetae,

Нет = ( В результате все должно быть на канвасе - это он-лайн конструктор...

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