HTML5 Canvas не отображает текст с помощью CSS3 @ font-face - PullRequest
Новая
       17

HTML5 Canvas не отображает текст с помощью CSS3 @ font-face

0 голосов
/ 10 сентября 2011

Мой HTML-документ: 

<!DOCTYPE html> 
<HTML> 
    <HEAD> 
        <meta charset="utf-8"> 
    <style>
      @font-face {
        font-family: "canvas";
        font-style: normal;
        font-weight: normal;
        src: local('JesterRegular.woff'), url('JesterRegular.woff') format('woff');
      }
    </style>
        <title>Interactive</title> 
    </HEAD> 
    <BODY>
      <div style="font-family: canvas">test</div>
    <canvas id="simulator">
      <h1>Your browser doesn't support this element.</h1>
    </canvas>
    <script type="text/javascript" src="elements.js"></script>
    <script type="text/javascript" src="backgroundgen.js"></script>
        <script type="text/javascript" src="tileengine.js"></script>
        <script type="text/javascript" src="simulator.js"></script> 
    </BODY> 
</HTML>

Применимая часть моего JavaScript от backgroundgen.js: 

drawTitle: function() {
  BackgroundGen.context.fillStyle = BackgroundGen.titleBGColor;
  BackgroundGen.context.fillRect(0,0,BackgroundGen.canvas.width,30);
  textXpos = BackgroundGen.canvas.width/2;
  BackgroundGen.context.textAlign = "center";
  BackgroundGen.context.font = '20px "canvas"';
  BackgroundGen.context.fillStyle = "rgb(0,0,0)";
  BackgroundGen.context.fillText(BackgroundGen.titleText, textXpos, 15);
}

При использовании пользовательского шрифта «canvas» текст вообще не отображается. Если я заменю canvas типичным шрифтом, например, arial, он отображается нормально. Я адаптировал технику загрузки шрифта, прежде чем отображать его на холсте с тегом <div> в HTML, но до сих пор не радуюсь. Содержимое тега <div> отображается нормально, правильный шрифт canvas, просто ничего на холсте. Для справки, я использую Chromium v12 и Firefox v6 в Ubuntu.

Чтобы уточнить, консоль JavaScript Chromium не сообщает о каких-либо ошибках, а консоль ошибок Firefox также ничего не сообщает.

Ответы [ 3 ]

2 голосов
/ 25 сентября 2012

Пример кода: 

<html>
  <head>
    <style type="text/css">
      @font-face {
        font-family: YourFontName;
        src: url(your/very/long/URL/here)
    </style>
    <script>
      function onloaded() {
        //your code canvas code goes here
      }
    </script>
  </head
  <body onload="onloaded()">

  <canvas id="somecanvasid"></canvas>

  </body>
</html>

Функция onloaded будет действовать как обратный вызов и будет выполняться, когда все содержимое документа HTML будет загружено.Вы должны определить его в HTML-документе, чтобы он был включен после завершения загрузки всего остального.

2 голосов
/ 10 сентября 2011

Похоже, что встроенные шрифты должны работать в <canvas>, но вы должны убедиться, что шрифт полностью загружен перед рисованием. Это означает использование <div>, чтобы заставить браузер загрузить шрифт, затем ожидание рисования до тех пор, пока он не загрузится.

Вы пытались звонить drawTitle после document.load или даже setTimeout(drawTitle, 1000)?

0 голосов
/ 30 сентября 2016

Вы можете запросить загрузку файла * .woff по css следующим образом: 

body:before{
    font-family: Allura;
    height: '0px';
    overflow: hidden;
    position: absolute;
    content: "abcděůž";
}

Файл Woff можно разделить на некоторые специальные символы, поэтому содержимое должно содержать их.

Но загрузка файла woff по-прежнему асинхронна, поэтому он может не работать, если метод fillText () вызывается сразу после загрузки страницы.

...