Question

我的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>

来自backgroundgen.js的javascript的适用部分是：

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”字体时，根本不显示任何文本。如果我用一个典型的字体替换画布，例如arial，它显示正常。我已经调整了加载字体的技术，然后在我的画布中使用HTML中的<div>标记显示它，仍然没有乐趣。 <div>标记的内容显示精细，适当的画布字体，画布中没有任何内容。为了记录，我在Ubuntu上运行Chromium v12和Firefox v6。

为了澄清，Chromium的javascript控制台不报告任何错误，Firefox的错误控制台也没有报告任何错误。

Answer 1

It looks like embedded fonts should work in <canvas>，但您必须确保在绘制之前加载完全字体。这意味着使用<div>强制浏览器加载字体，然后等待绘制，直到下载完毕。

您是否尝试过drawTitle或document.load之后致电setTimeout(drawTitle, 1000)？

Answer 2

示例代码：

<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文档中定义它，以便在其他所有内容完成加载时包含它。

Answer 3

您可以通过css提示下载* .woff文件，如下所示：

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

可以为某些特殊字符拆分Woff文件，因此内容应该包含它们。

但是下载woff文件仍然是异步的，所以如果在页面加载后立即调用fillText（），它可能无效。

HTML5 Canvas不会使用CSS3＆＃39; s @ font-face显示任何文本

3 个答案: