Использование шрифтов font-face с холстом fillText

РЕДАКТИРОВАТЬ: похоже, что шрифт загружается после того, как он используется элементом в DOM, поэтому я просто использовал скрытый Div с текстом, использующим шрифт font-face, и теперь он работает ... . :)

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

Это мой код Javascript

            var canvas = document.createElement('canvas'),
            ctx,
            img = document.createElement('img'),
            link = document.getElementById('favicon').cloneNode(true),
            updates = data;

        if (canvas.getContext) {
          canvas.height = canvas.width = 16; // set the size
          ctx = canvas.getContext('2d');
          img.onload = function () { // once the image has loaded
            ctx.drawImage(this, 0, 0);
            ctx.font = 'normal 12px Visitor';
            ctx.fillStyle = '#213B55';
            ctx.textBaseline="middle";
            ctx.textAlign="center";
            ctx.fillText(updates, 10, 10);
            link.href = canvas.toDataURL('image/png');
            document.body.appendChild(link);
          };
          img.src = 'favicon_new.png';
        }

Это в моем CSS

@font-face {
font-family: 'Visitor';
font -style: normal;
font-weight: normal;
src: url('fonts/visitor.woff') format('woff');

Если я изменю эту строку:

  ctx.font = 'normal 12px Visitor';

С 'нормальным 12px Arial' работает нормально. Если я использую собственный шрифт «Посетитель», он просто меняет значок, но я не вижу номера.

Есть идеи, в чем может быть проблема?


canvas html font-face
person Santiago    schedule 09.06.2011    source источник
comment
Ознакомьтесь с моим решением по использованию элемента ‹img› для загрузки шрифта: stackoverflow.com/questions/8198967/   -  person a paid nerd    schedule 22.11.2011
comment
Вы также можете загрузить шрифт, используя URL-адрес данных в вашем CSS, который мне подходит.   -  person Blaise    schedule 26.11.2012
comment
Не бойтесь публиковать свое «Редактировать» в качестве ответа.   -  person xdhmoore    schedule 04.09.2013
comment
Да, опубликуйте свою правку в качестве ответа и примите ее, чтобы она больше не появлялась в очереди без ответа, и людям с этой проблемой было легче найти ответ.   -  person Simon Sarris    schedule 08.03.2014
comment
Остерегайтесь, скрытые трюки с div не всегда работают. Извините, я не могу сейчас сказать, в какой конфигурации, но я видел, что это не удалось - если это работает для ваших целевых браузеров, это не проблема -   -  person GameAlchemist    schedule 14.04.2014

Ответы (1)


arrow_upward
1
arrow_downward

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

Вот пример кода с Pacifico из Google Fonts (который не является веб-безопасным шрифтом).

<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<script>
 window.onload=function() {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  context.fillStyle = "blue";
  context.font = "16pt Pacifico";
  context.fillText("Cursive font", 50, 50);
 }
</script>
<canvas id="canvas" width="200" height="200"></canvas>

Это должно быть возможно с другими шрифтами.

Убедитесь, что ваш @ font-face имеет font-style: normal; и font-weight: 400;.

person theawesomecoder61    schedule 18.12.2014