Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.02.2014, 05:48
Аватар для Fairy-Wilbury
Интересующийся
Отправить личное сообщение для Fairy-Wilbury Посмотреть профиль Найти все сообщения от Fairy-Wilbury
 
Регистрация: 01.09.2013
Сообщений: 12

font-face шрифты и canvas
Возникла проблема при подключении шрифтов через @font-face и выводу их на canvas.
Шрифты выводятся, но у одного из шрифтов отдельные буквы получаются значительно бледнее остальных в Firefox, Safari и Internet Explorer. При этом просто в html странице при использовании этого шрифта все нормально. В Chrome и Maxthon вообще все нормально и на canvas и в html.
Что это может быть? Как с этим бороться?
Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 24.02.2014, 11:56
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

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

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

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

Кстати, я как-то пытался оптимизировать веб-шрифты. Скажем мне нужны только два набора - кириллица и латинница. Скачал, открыл, выкосил лишнее, сгенерил - ок. Сконвертил в веб он-лайн - получил полное гавно. Все хинты слетели к чертям.
Ответить с цитированием
  #3 (permalink)  
Старый 24.02.2014, 12:41
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от kostyanet
Сконвертил в веб он-лайн - получил полное гавно. Все хинты слетели к чертям.
Если ты про шрифтобелку, то там ведь есть куча галочек настроечных.
Сообщение от kostyanet
В общем это либо либа так рендерит
Вообще-то все это работает без всяких либ. Достаточно загрузить шрифт через @font-face. Вот только я хз как определить момент, когда шрифт загрузился.
Fairy-Wilbury, сделайте скриншот с проблемой что-ли.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #4 (permalink)  
Старый 24.02.2014, 20:04
Аватар для Fairy-Wilbury
Интересующийся
Отправить личное сообщение для Fairy-Wilbury Посмотреть профиль Найти все сообщения от Fairy-Wilbury
 
Регистрация: 01.09.2013
Сообщений: 12

kostyanet,

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

danik.js,
Вот скриншот в Firefox:
Ответить с цитированием
  #5 (permalink)  
Старый 24.02.2014, 21:18
Аватар для Fairy-Wilbury
Интересующийся
Отправить личное сообщение для Fairy-Wilbury Посмотреть профиль Найти все сообщения от Fairy-Wilbury
 
Регистрация: 01.09.2013
Сообщений: 12

Проверенно - на чистом js без оCanvas - то же самое. Проблема почему-то с заглавной S в первую очередь, но и некоторые другие буквы выглядят более блеклыми.
Ответить с цитированием
  #6 (permalink)  
Старый 26.02.2014, 00:50
Аватар для Fairy-Wilbury
Интересующийся
Отправить личное сообщение для Fairy-Wilbury Посмотреть профиль Найти все сообщения от Fairy-Wilbury
 
Регистрация: 01.09.2013
Сообщений: 12

Неужели никто не сталкивался ни с чем подобным?..
В интернете тоже нет нигде ответа, ни на stack overflow, ни просто в поиске не удалось найти... = (
Ответить с цитированием
  #7 (permalink)  
Старый 26.02.2014, 01:35
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

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
__________________
29375, 35

Последний раз редактировалось Aetae, 26.02.2014 в 01:44.
Ответить с цитированием
  #8 (permalink)  
Старый 26.02.2014, 02:12
Аватар для Fairy-Wilbury
Интересующийся
Отправить личное сообщение для Fairy-Wilbury Посмотреть профиль Найти все сообщения от Fairy-Wilbury
 
Регистрация: 01.09.2013
Сообщений: 12

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

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

Уменьшать пробовала уже - тоже не помогает. = (
Ответить с цитированием
  #9 (permalink)  
Старый 26.02.2014, 02:37
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

А текст точно обычным html поверх наложить никак?)
__________________
29375, 35
Ответить с цитированием
  #10 (permalink)  
Старый 26.02.2014, 03:50
Аватар для Fairy-Wilbury
Интересующийся
Отправить личное сообщение для Fairy-Wilbury Посмотреть профиль Найти все сообщения от Fairy-Wilbury
 
Регистрация: 01.09.2013
Сообщений: 12

Aetae,

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Canvas картинка с обесцвечиванием. cheba Общие вопросы Javascript 9 31.05.2013 09:13
Нестандартные шрифты на холсте Canvas. Mike_Kharkov (X)HTML/CSS 15 28.03.2013 15:02
Почему неправильно вырисовывается canvas? Amateur Events/DOM/Window 0 19.09.2012 10:45
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16