Як я можу використовувати власні шрифти в елементі полотна HTML5?

Я розглядав такі речі, як Cufon і typeface.js, але вони, схоже, є альтернативами SIFR і не дозволяють встановлювати координати вільної форми та малювати власний тип на <canvas>

У когось є якісь ідеї?

— jdee
джерело

Відповіді:

Тут я зібрав просту демонстраційну версію на jsfiddle, де показано, як це зробити за допомогою @ font-face: http://jsfiddle.net/zMKge/

У Opera також є простий підручник з використання <canvas>, включаючи текстовий API.

CSS:

@font-face {
    font-family: 'KulminoituvaRegular';
    src: url('http://www.miketaylr.com/f/kulminoituva.ttf');
}

Javascript:

var ctx = document.getElementById('c').getContext('2d');
var kitty = new Image();
kitty.src = 'http://i954.photobucket.com/albums/ae30/rte148/891blog_keyboard_cat.gif';
kitty.onload = function(){
  ctx.drawImage(this, 0,0,this.width, this.height);
  ctx.font         = '68px KulminoituvaRegular';
  ctx.fillStyle = 'orangered';
  ctx.textBaseline = 'top';
  ctx.fillText  ('Keyboard Cat', 0, 270);
};

— miketaylr
джерело

Будьте в курсі цього питання, хоча: stackoverflow.com/questions/2756575 / ...

— Alsciende

Проблема з Firefox пов’язана з тим, що браузер дуже суворо дотримується політики того самого походження. Зірки мають вирівнюватися, а зображення, шрифт та веб-сторінка ВСЕ повинні бути в одному домені

— Кріс Боско,

Це не працює в Chrome 21, але працює на FF 7, 12 і 15. Все на Windows 7.

— Шарлотта,

Це не працює (надійно) у браузері BlackBerry Playbook. У кращому випадку це працює при оновленні сторінки; іноді шрифт взагалі не відображається.

— Тед Хопп

Я не зміг змусити цей JSFiddle працювати, тому оновив його за допомогою Google Webfont. jsfiddle.net/zMKge/2171

— Francisc0

Я щойно відповів на це запитання: Попередньо завантажте шрифт HTML5, JS, Kinetic.js?

Основна частина:

@font-face {
    font-family: 'myfont';
    src: url('myfont.eot');
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
         url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype'),
         url('myfont.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

Не має значення, використовуєте ви KineticJS чи ні, єдина відмінність без KineticJS полягає в тому, що ви могли б створити елемент Canvas безпосередньо за допомогою HTML, а не використовувати шар div як контейнер. Адже KineticJS просто створює звичайний елемент Canvas у цьому контейнері.

— лущн
джерело

Хоча це посилання може відповісти на питання, краще включити сюди основні частини відповіді та надати посилання для довідки. Відповіді лише на посилання можуть стати недійсними, якщо пов’язана сторінка зміниться.

— Джош Берджесс

в такому випадку я б сказав, що це нормально, тому що він посилається на stackoverflow;) - але я включу необхідну частину.

— luschn