Question

我正在尝试使用CSS（@media print 下的）和JavaScript来打印一页文档，其中包含尽可能大的给定文本，同时仍然适合于给定宽度。事先不知道文本的长度，因此仅使用固定宽度的字体不是一种选择。

换句话说，我正在寻找适当的调整大小，例如，“IIIII”会出现比“WWWWW”更大的字体大小，因为“I”比“W”更瘦。用可变宽度字体。

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

如果这只是一个CSS3功能（font-size:max-for-width(7.5in)），我会很喜欢它，但如果是这样，我就找不到它。

Answer 1

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

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


in（英寸; 1英寸= 2.54厘米）

厘米（厘米; 1厘米= 10毫米）

mm（毫米）

pt（points; 1pt = 1 / 72in）

pc（picas; 1pc = 12pt）

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

编辑：请注意，您可能还需要使用字母间距属性等设置，并尝试使用哪种字体，因为字体大小设置不是真的字母的宽度，根据字母间距和字体，与长度成正比而不同。哦，并使用等宽字体帮助;）

Answer 2

我不知道在CSS中这样做的方法。我认为你最好的选择是使用Javascript：

将文字放入div
获取div的尺寸
如有必要，请将文字缩小
返回第2步，直到文字足够小

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

Answer 3

以下是我最终使用的一些代码，以防有人发现它有用。您需要做的就是使外部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
}

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

3 个答案: