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

Posted 2023-02-24

【中文标题】如何在没有任何损坏的情况下将“ğ”填充到文本中？

【英文标题】：How can I fill "ğ" to the text without any corruption?

【发布时间】：2021-10-25 14:07:41

【问题描述】：

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

代码在这里：

$("#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>

【问题讨论】：

“utf-8 中不存在的像“ğ”这样的字母” - 当然，这个字母可以用 UTF-8 编码......这个网站在这里使用UTF-8 字符编码，你可以在这里发布，不是吗？

ğ 存在于 utf-8 中：它是 U+011F (c4 9f)

第一张图片表示您使用的字体不支持该字母。对于第二张图片，尚不清楚那里发生了什么。

也许第一次使用这个字符会触发在背景中加载不同的字体，其中包含关于如何渲染这个字形的说明——但是当你第一次在画布上绘画时还没有完成，所以它只能在第二次按要求工作...？

如何为土耳其字符加载它？

【参考方案1】：

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

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

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

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

您可以做的一件事是利用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>

【讨论】：

根据我的测试，我认为字体在用户与页面进行一些交互之前不会开始加载。查看我已删除的答案

@mplungjan 我也做了一些类似的测试。奇怪的是，如果您将 input 的字体设置为 Robot，除非您将字体大小设置为默认值以外的其他值，否则它也不会起作用。即便如此，输入元素的字体看起来还是正确的。