如何在没有任何损坏的情况下向文本填充“ğ”？

Question

我尝试使用 canvas 制作电子邮件签名生成器。因为土耳其语名称包含 utf-8 中不存在的字母，如“ğ”，当我将文本填充到 canvas 时，它已损坏，但当我单击按钮两次时，损坏不再存在。我该如何解决这个问题？

代码在这里：

$("#formButton").click(function() {
  var name = $("#formName").val();
  var title = $("#formTitle").val();

  Promise.all([
    document.fonts.load("700 32px Roboto"),
    document.fonts.load("300 20px Roboto"),
  ]).then(() => {
    var canvas = document.getElementById("canvas-top");
    var ctx = canvas.getContext("2d");

    ctx.font = "700 32px Roboto";
    ctx.fillStyle = "#1F5890";
    ctx.fillText(name, 15, 80);

    ctx.font = "300 20px Roboto";
    ctx.fillStyle = "#1F5890";
    ctx.fillText(title, 15, 105);
  });

  console.log(name, title);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap" />
<form>
  <input type="text" id="formName" value="Gündoğdu" />
  <input type="text" id="formTitle" value="Gündoğdu" />
  <input type="button" id="formButton" value="Click" />
</form>
<canvas id="canvas-top"></canvas>

Answer 1

根据您的评论，您使用此 URL https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700

加载字体

这里的重要部分是 google fonts 将字体拆分器传送到多个文件中，用于不同的字符集，这些文件按需加载。

绘制文本会触发所需文件的加载，但绘图发生在该文件加载之前。

这就是为什么您的字母在第一次抽奖时显示不正确，但在您第二次触发抽奖时会显示正确的原因。

您可以做的一件事是利用 fonts.load 函数的 text 参数，并传递要使用该字体绘制的文本：

$("#formButton").click(function() {
  var name = $("#formName").val();
  var title = $("#formTitle").val();

  Promise.all([
    document.fonts.load("700 32px Roboto", name),

    document.fonts.load("300 20px Roboto", title),
  ]).then(() => {
    var canvas = document.getElementById("canvas-top");
    var ctx = canvas.getContext("2d");

    ctx.font = "700 32px Roboto";
    ctx.fillStyle = "#1F5890";
    ctx.fillText(name, 15, 80);

    ctx.font = "300 20px Roboto";
    ctx.fillStyle = "#1F5890";
    ctx.fillText(title, 15, 105);
  });

  console.log(name, title);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap" />
<form>
  <input type="text" id="formName" value="Gündoğdu" />
  <input type="text" id="formTitle" value="Gündoğdu" />
  <input type="button" id="formButton" value="Click" />
</form>
<canvas id="canvas-top"></canvas>

如何在没有任何损坏的情况下向文本填充“ğ”？

How can I fill "ğ" to the text without any corruption?

html

javascript

utf-8