font-face шрифты и canvas
 

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

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

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

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

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

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

kostyanet,

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

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

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

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

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

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

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

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

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

Aetae,

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

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

Мда... В результате экспериментов было установленно, что если уменьшить канвас в полтора раза, увеличить шрифт пропорционально и при правильном расположении по вертикали (!) Файерфокс начинает отобржать шрифт равномерно 0_о Пойду думать, что с этим делать.... :lol:

Кстати. Пробовали начинать отрисовку текста с полупиксельных позиций (0.5,0.5 вместо 0,0 например) ?

Aetae,
Попробовала сейчас - ноль эффекта :cray:

Ответ был выше, вы его просто не поняли. http://en.wikipedia.org/wiki/Font_hinting есть на русском.

Это все бубен. Двигать смысла нет, можно раздвигать и сдвигать (трекинг), плющить и таращить (масштабировать), уменьшать кегль, увеличивать кегль по чуть-чуть в надежде что глифы более-менее впишутся в пикселы.

Fairy-Wilbury, шрифт с сервера, или с гугля? На гугле фирменные: хинты и кернинг тщательно проработаны, некоторые даже с лигатурами.

Вы хоть одно слово поняли? :) И не надо. Вам самим сделать хинтинг с кернингом не светит, а без этого на маленьком кегле вы получите заведомо какаху, а не отпечаток.

Кстати, откуда взялась попытка сглаживания на процитированной вами фотке я не понял. Это ФФ что ли теперь сглаживает все что ему попадется в канвасе? Была недавно тема про сглаживание линий. В период ознакомления с канвасом шрифты не сглаживались в ФФ вообще.

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

Вы можете проверить свой шрифт в ФШ, или в любом другом растровом редакторе который умеет рендерить системным движком (то есть осевым). Задайте такой же кегль, выберите системный рендлер и посмотрите что получится на том же слове.