javascript - 调整文本大小忽略小数

Question

我在为一个元素制作的文本大小调整功能上遇到了问题。它的目的是调整一些文本行的大小，使它们在 400 像素内左右对齐。

问题与此类似:Decimal ignored when changing font size with JS但有一些不同。作者一直在使用像素——解决方案是使用其他东西，因为浏览器并不总是支持单个像素的划分。我用积分。由于库文件的大小，我也不能使用 jQuery。

这是调整大小的代码。它是这样工作的:

If the textwidth (span) is less than the bounding frame, increment the font size by 1/10th.

var textobject = document.getElementById(theText);
var currentFontsize = parseFloat(window.getComputedStyle(textobject, null).getPropertyValue('font-size'));
while (textobject.offsetWidth < 400) {
    currentFontsize += .1;
    console.log("Width: "+textobject.offsetWidth+ " using fontsize: "+currentFontsize);
    textobject.style.fontSize = currentFontsize+"pt";
}

这是我的观察:

• 它适用于我的浏览器； IE、Chrome 和 Firefox(全部更新)。
• 它几乎可以在我 friend 的 IE、Chrome 和 Firefox(全部更新)中运行。宽度最多错误 6-7 个像素。
• 它在 Mac/Safari 上的表现不尽如人意。此处，对齐偏移了 13-15 个像素。

我查看了控制台，这些是我的观察结果:

Width: 372 using fontsize: 16.1
Width: 372 using fontsize: 16.2
Width: 390 using fontsize: 16.3
Width: 390 using fontsize: 16.4
Width: 390 using fontsize: 16.5
Width: 390 using fontsize: 16.6

如您所见，它从 372 跳到 390 而没有设置合适的字体大小。令我困惑的是它在不同机器上的工作方式如此不同。非常感谢任何关于如何解决这个问题的想法!

---

更新:我放弃了自动调整字体大小的功能，转而使用 GD 库，以便所有文本都存储在单个位图中。看起来很有希望，但还是有一些problems

Answer 1

由于字体的性质，字体通常不会线性缩放 - 它们会在某些尺寸下进行优化⁽¹，尤其是面向屏幕的字体⁽²(除非字体质量低)。

即使您增加字体大小，它也可能只会稍微增加高度，但不一定会增加宽度或重量，或者 vica verca 等等 - 这样它在任何尺寸下看起来都不错且清晰，尤其是由于屏幕尺寸较小屏幕的相对较低的分辨率。

浏览器中的各种字体引擎将以同样不同的方式处理这个问题，并尝试使用最接近优化大小的字体，以便字体看起来清晰(对于较大的字体，这通常不是问题，但对于较小的字体，它是)。不过，它在很大程度上也取决于字体。

目前，使用较小的字体来获得这种控制级别的唯一方法是使用较大的尺寸将文本绘制到位图(即 Canvas )，然后将该位图缩放到您需要的确切大小(松开选择能力等。在去..)。但仍然容易出现抗锯齿等问题。

如果您使用点指定字体大小，则该大小将根据系统的 DPI 转换为像素:

sizeInPixels = 72 / systemDPI * sizeInPoints  (ie. 72 / 96 * 16 = 12 pixels)

像素本质上是整数，但结果可能因浏览器的字体引擎处理子像素化的方式而异。

更新

我又给了它一轮并想出了一个简单的可能解决方案，不过，它没有用各种字体进行测试，所以我不能保证它 100% 按预期工作，但这通过缩放变换使用上面的原理首先缩放预填充的位图。

var ctx = canvas.getContext('2d'),
    w = canvas.width,
    lines = [
      "THIS IS HEADLINE",
      "AND THIS IS SPARTA",
      "UNDERLINE",
      "How about a little longer line?"
    ],

    //we have to guess font height as TextMetrics object is not fully implemented
    th = 30;

// setup text
ctx.font = "32px sans-serif";

for(var i = 0, line; line = lines[i]; i++) {

  var tw = ctx.measureText(line).width, // measure width of text in pixels
      s = w / tw;                       // scale based on canvas and text width
  
  ctx.translate(0, th*s);               // move line down, font heigh x scale
  ctx.scale(s, s);                      // scale canvas
  ctx.fillText(line, 0, 0);             // draw text at this scale
  ctx.scale(1/s, 1/s);                  // reset scale
}

#canvas{border:1px solid red}

<canvas width=500 height=240 id=canvas></canvas>

---

1) 大小通常是指字体的高度，不一定对应于字体的可见部分，还包括任何空白。
2) 在打印世界中，这通常不是问题，因为打印品具有更高的分辨率。