您如何找到不会破坏给定文本的最大字体？

Question

我正在尝试使用 CSS（在@media print 下）和 JavaScript 打印一个单页文档，其中给定的文本尽可能大，同时仍然适合给定的宽度.事先不知道文本的长度，因此不能简单地使用固定宽度的字体。

换句话说，我正在寻找适当的大小调整，例如，“IIIII”的字体大小会比“WWWW”大得多，因为“I”比“W”要窄得多可变宽度字体。

我能做到的最接近的方法是使用 JavaScript 尝试各种字体大小，直到 clientWidth 足够小。 这对于屏幕媒体来说效果很好，但是当您切换到打印媒体时，是否可以保证我的系统上显示的 90 DPI（即，我将边距设置为 0.5 两边，并且对于调整大小以使其恰好适合其中的文本，我得到大约 675 clientWidth) 在其他任何地方都一样吗？从像素测量值转换时，浏览器如何决定使用什么 DPI？有什么方法可以使用 JavaScript 访问这些信息？

如果这只是 CSS3 功能 (font-size:max-for-width(7.5in)) 我会很高兴，但如果是的话，我找不到它。

Answer 1

这是我最终使用的一些代码，以防有人发现它有用。您需要做的就是将外部 DIV 设置为您想要的尺寸（以英寸为单位）。

function make_big(id) // must be an inline element inside a block-level element
{
    var e = document.getElementById(id);
    e.style.whiteSpace = 'nowrap';
    e.style.textAlign = 'center';
    var max = e.parentNode.scrollWidth - 4; // a little padding
    e.style.fontSize = (max / 4) + 'px'; // make a guess, then we'll use the resulting ratio
    e.style.fontSize = (max / (e.scrollWidth / parseFloat(e.style.fontSize))) + 'px';
    e.style.display = 'block'; // so centering takes effect
}

Answer 2

CSS font-size 属性接受length units，其中包括以英寸或厘米为单位的绝对测量值：

绝对长度单位高度依赖于输出介质，并且 所以不如相对单位有用。以下绝对单位 可用：

• in（英寸；1in=2.54cm）
• cm（厘米；1cm=10mm）
• mm（毫米）
• pt（点；1pt=1/72in）
• pc (picas; 1pc=12pt)

由于您还不知道您的文本有多少个字符，您可能需要结合使用 javascript 和 CSS 才能正确动态地设置 font-size 属性。例如，取字符串的长度（以字符为单位），然后将 8.5（假设您期望使用美国信纸大小的纸张）除以字符数，从而得到以英寸为单位的大小，以便为该块设置 font-size文本。在 Firefox、Safari 和 IE6 中使用绝对测量值测试了字体大小，因此它应该非常便携。希望对您有所帮助。

编辑：请注意，您可能还需要使用诸如 letter-spacing 属性之类的设置，并尝试使用您使用的字体，因为 font-size 设置并不是真正的字母的宽度，这将根据字母间距和字体而有所不同，与长度成正比。哦，使用等宽字体会有所帮助；）

Answer 3

我不知道如何在 CSS 中做到这一点。我认为你最好的选择是使用 Javascript：

1. 将文本放入 div 中
2. 获取 div 的尺寸
3. 必要时缩小文本
4. 回到第 2 步，直到文本足够小

这里有一些sample code to detect the size of the div。