2

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

换句话说，我正在寻找适当的调整大小，例如，“IIIIII”会以比“WWWWW”大得多的字体出现，因为“I”在变量中比“W”更瘦-宽度字体。

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

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

4

3 回答 3

3

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

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

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

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

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

于 2008-10-02T07:15:49.790 回答
0

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

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

这是一些用于检测 div 大小的示例代码。

于 2008-10-01T17:53:16.113 回答
0

这是我最终使用的一些代码，以防有人发现它有用。您需要做的就是将外部 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
}
于 2008-10-02T18:46:39.690 回答