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

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

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

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

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

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

ОТВЕТЫ

Ответ 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, поэтому, возможно, обходной путь (если определение шрифта не помогает) может использовать этот шрифт в некотором скрытом div, из Конечно, я запускаю все JS после нагрузок тела.

Ответ 2

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

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

Ответ 4

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

Ответ 5

ПРИМЕЧАНИЕ: устаревшее с 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 /questions/73200/javascript-capturing-load-event-on-link
var image = new Image;
image.src = link.href;
image.onerror = function() {
    ctx.font = '50px "Vast Shadow"';
    ctx.textBaseline = 'top';
    ctx.fillText('Hello!', 20, 10);
};

Ответ 6

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

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

context.font = "30px Officina";