Question

我正在尝试使用简单的脚本在文本上绘制文本。除了没有加载Font之外，它工作正常。

我尝试在本地和网络上加载字体，但两者都无法在我的服务器上运行。

上正常运行

我认为这与字体未正确加载或过晚有关。确保正确加载字体的最佳方法是什么？

before_create :set_account_number
def set_account_number
  last_account_number = Account.maximum(:account_number)
  self.account_number = last_account_number.to_i + 50
end

Answer 1

我真的很想投票结束与this Q/A的重复，但由于你处于特定情况，我还是会发布这个答案，这可能不是最好的。

您正在使用<link>元素加载字体，因此一种方法是使用其onload事件处理程序。这种方法的问题是字体可能被缓存，并且load事件可能在它到达脚本声明之前被触发。

因此，您可以使用href +'&'+ new Date().getTime()技巧向服务器发出新请求，或者您可以从DOM中删除<link>并重新加载它。这样，即使使用了缓存版本，它的load事件也应该再次触发。（请注意，我只在最新的FF和Chrome上测试过，因此可能无法在其他浏览器中使用）。

＆＃13;

var link = document.querySelector('link');
link.onload = function() {
  log.textContent = 'loading image...';
  var size = 200
  var textSize = size * 0.55;
  var countryCode = "nl";
  var text = "123";

  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  var img = new Image;
  img.onload = function() {
    log.textContent='';
    ctx.drawImage(img, -1, -1, size, size); // removes the 1px border the flags sometimes have
    ctx.font = textSize + "px Ubuntu";
    ctx.textAlign = "center";
    ctx.fillStyle = "#260C4D";
    ctx.fillText(text, size / 2, size / 2 + textSize / 2.85);
  };
  img.src = "http://lorempixel.com/200/200";
}
// in case it's in the cache, it seems we have to remove it from the DOM and reinsert it
link.parentNode.removeChild(link);
document.head.appendChild(link)

＆＃13;

body {
  font-family: Ubuntu, sans-serif;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">

<p id="log">loading font..</p>
<canvas style="border-radius: 100px;" id="myCanvas" width="200" height="200"></canvas>

＆＃13;

加载字体后Javascript画布绘制文本

1 个答案: