Внешний шрифт на холсте HTML5

Question

Я совершенно сбит с толку относительно того, как изменить шрифт, который я использую при рисовании текста на холсте. Ниже приведен шрифт, который я определил в своем CSS:

@font-face{
 font-family:"Officina";
 src:url(OfficinaSansStd-Book.otf);
}

Теперь в моем HTML / JavaScript я испытываю желание сказать:

context.font = '30px "Officina"';

Но это не работает. Он отлично работает, если я использую доступный в Интернете шрифт (например, Arial), и шрифт Officina хорошо отображается, когда я просто пишу простой текст прямо на веб-странице. Чего мне не хватает?

Answer 1

Чтобы обеспечить кросс-браузерную совместимость, вы должны использовать CSS для встроенного шрифта следующим образом:

@font-face {
    font-family: 'BankGothicMdBTMedium';
    src: url('bankgthd-webfont.eot');
    src: local('BankGothic Md BT'), local('BankGothicBTMedium'), url('bankgthd-webfont.woff') format('woff'), url('bankgthd-webfont.ttf') format('truetype'), url('bankgthd-webfont.svg#webfontNgZtDOtM') format('svg');
    font-weight: normal;
    font-style: normal;
}

Примечание: я получил эти файлы шрифтов где-то в http://fontsquirrel.com

Это работает для меня, но я использую этот шрифт также в разметке HTML, так что, возможно, обходной путь (если определение font-face не помогает) может использовать этот шрифт в некотором скрытом div из Конечно, я бегу все JS после нагрузки на тело.

Answer 2

Вы можете использовать загрузчик Google Web Font, но он довольно тяжелый и / или раздражающий для многих целей. Вместо этого я порекомендую библиотеку FontDetect Дженнифер Симондс , доступную на GitHub:

Класс JavaScript, который вы можете использовать, чтобы определить, был ли загружен веб-шрифт, какой шрифт используется элементом, или реагировать на загрузку веб-шрифта (или не удалось загрузить).

Answer 3

Для тех, кто придет к этому вопросу около 2017 года, лучше всего использовать Web Font Loader, который совместно производится Google и Typekit, расположенным здесь: - https://github.com/typekit/webfontloader

Answer 4

Это предыдущий вопрос должен помочь вам. Рисование текста в с @ font-face не работает в первый раз

Answer 5

Как насчет того, чтобы попытаться поместить ваш URL в виде строки:

@font-face{
 font-family:"Officina";
 src:url('OfficinaSansStd-Book.otf');
}

context.font = "30px Officina";

Answer 6

ПРИМЕЧАНИЕ: устарело по состоянию на 2016 г.

Используйте этот трюк и привяжите событие onerror к элементу Image.

Демо здесь: http://jsfiddle.net/g6LyK/ - работает на последнем Chrome.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://fonts.googleapis.com/css?family=Vast+Shadow';
document.getElementsByTagName('head')[0].appendChild(link);

// Trick from /1734741/javascript-zahvat-sobytiya-zagruzki-po-ssylke
var image = new Image;
image.src = link.href;
image.onerror = function() {
    ctx.font = '50px "Vast Shadow"';
    ctx.textBaseline = 'top';
    ctx.fillText('Hello!', 20, 10);
};