Question

我在修改文本大小时遇到了问题，我为一个项目做了一个。它的目的是调整大量文本行的大小，使它们在400像素内向左，向右对齐。

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

这是调整大小的代码。它的工作原理如下：

如果textwidth（span）小于边界框，则递增字体大小为1/10。

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（全部更新）。
它几乎适用于我朋友的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

由于字体的性质，字体通常不会线性缩放 - 它们在某些尺寸^（1，尤其是面向屏幕的字体^（2（除非字体）之外进行了优化是低质量的。）

即使你增加了字体大小，它的高度也可能略有增加，但不一定是宽度或重量增加，或者是vica verca等等 - 这样它看起来很好，并且在任何尺寸下都很清晰，特别是因为屏幕尺寸较小屏幕的分辨率相对较低。

浏览器中的各种字体引擎将以同样的方式处理此问题，并尝试使用最接近优化尺寸的字体，因此字体看起来很清晰（对于较大尺寸，这通常不是问题，但对于较小尺寸，它是）。它确实非常依赖于字体。

目前，使用较小字体大小进行此级别控制的唯一方法是使用较大的大小将文本绘制到位图（即画布），并将该位图缩放到所需的确切大小（松动）选择能力等... ...但仍然容易出现抗锯齿等问题。

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

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

像素本质上是整数，但结果可能会有所不同，具体取决于浏览器的字体引擎如何处理子像素。

<强>更新

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

＆＃13;

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
}

＆＃13;

#canvas{border:1px solid red}

＆＃13;

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

＆＃13;

1）尺寸通常指的是字体的高度，并不一定只对应于字体的可见部分，但也包括任何空格。
2）在印刷世界中，这通常不是问题，因为印刷品具有更高的分辨率。

调整文本大小会忽略小数

1 个答案: