有没有办法在 p5.js 中使用默认字体在文本后面放置一个框？答案

【问题标题】：Is there a way to put a box behind text in p5.js with the default font?有没有办法在 p5.js 中使用默认字体在文本后面放置一个框？
【发布时间】：2019-11-17 11:41:29
【问题描述】：

我想在 p5.js 画布中制作一个与我的文本紧密贴合的框——这可以做到，但我只能通过将新字体加载到程序中来弄清楚如何做到这一点。

是否可以使用默认字体在文本后面创建一个紧凑的框，从而避免加载新字体？

进一步说明
为了在画布上获得围绕某些文本的紧密框，可以使用textBounds() 方法来获取文本的边界。您将获得与文本紧密贴合的框角的位置。现在，在http://p5js.org/reference/#/p5.Font/textBounds 找到的 p5.js 示例中，我在下面放入了代码片段，看来您必须在使用 textBounds() 之前加载带有 loadFont() 的字体以获取包含文本的框的边界。我的问题是，如何在不加载字体而只使用默认字体的情况下完成此操作？

例如，我必须为下面的“代码片段”使用外部托管的 google 字体。 我宁愿在默认字体后面放一个框，以避免加载某些字体。

let font;
let textString = 'Lorem ipsum dolor sit amet.';

function preload() {
  font = loadFont('https://raw.githubusercontent.com/google/fonts/master/ofl/alikeangular/AlikeAngular-Regular.ttf');
}

function setup() {
  background(210);

  let bbox = font.textBounds(textString, 10, 30, 12);
  fill(255);
  stroke(0);
  rect(bbox.x, bbox.y, bbox.w, bbox.h);
  fill(0);
  noStroke();

  textFont(font);
  textSize(12);
  text(textString, 10, 30);
}

&lt;script src="https://cdn.jsdelivr.net/npm/p5@0.9.0/lib/p5.min.js"&gt;&lt;/script&gt;

【问题讨论】：

我有一个 p3 方法，它添加了换行符，所以我的文本不会超过包含它的图块。我不确定它是否有帮助，但如果你认为可以，我可以发布它。
不，您确实想使用显式字体：不能保证默认字体对于不同的人看起来是一样的，因为 p5 没有预先提供它（它只是依赖于字体名称神奇地存在于人们的计算机上，它甚至无法指示它需要是该字体的哪个版本）。因此，如果您不想使用 google 字体，请将您自己的字体（以 woff2 或较旧的 woff 格式，not ttf 或 otf）托管在与您的页面相同的目录中，而不是在 google 上，并且工作完成了。
我在让 p5.js 使用 woff2 时遇到了麻烦，但在旧的 ttf/otf 上没有问题。这是默认行为吗？

标签： javascript fonts processing p5.js opentype

【解决方案1】：

根据设计，在定义字体后必须调用p5.Font.textBounds() - 您将在 p5.Font 类的许多其他方法中看到相同的内容，例如textToPoints()。这是有原因的——

无法使用 p5.js 从给定浏览器检索默认字体。
无论如何，为应用程序设置使用的字体是一种很好的做法，因为不同浏览器的“默认”会有所不同。如果您在 MacOS 上编写处理程序然后在 Windows 上运行，同样适用 - 默认字体将自动映射到给定平台上可用的最合适的“默认”字体。

TL;DR - 不，没有定义字体就无法运行textBounds()。

【讨论】：

好吧，我明白了。 p5.js 在你调用它之前不知道字体。假设，我敢打赌，如果开发人员愿意，他们可以让 p5.js 确定这一点。对我来说，必须通过额外的代码，找到源字体，做一些应该很容易的事情似乎很愚蠢。
除非具体来说，他们不能。在浏览器中运行的 JS 无法询问它给出了哪个版本的字体，这意味着据任何 JS 所知，使用 Arial 3.0 和 Arial v5.001（它们完全不同）的人正在使用相同的字体只是因为名称匹配。像 San Fransisco 这样的字体更有趣，它既是一种有趣的梦幻字体（从 1984 年开始），又是一种干净的 UI 字体（从 2015 年开始）。
据我所知，从您所说的情况来看，在浏览器中运行的 JS 在启动时不会加载默认字体。如果您要求它使用字体做某事，并且您不要求它使用其他地方的指定字体，它只会抓取默认字体并盲目使用它。为什么 JS 不问默认字体是什么并在启动时加载默认字体，而不是在调用的时候盲目地抓取它？