我们如何找到不会破坏给定文本的最大字体大小?

时间:2020-03-06 14:59:15  来源:igfitidea点击:

我正在尝试使用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)),我会喜欢的,但是如果是这样,我还找不到它。

解决方案

我不知道在CSS中执行此操作的方法。我认为我们最好的选择是使用Javascript:

  • 将文本放在div中
  • 获取div的尺寸
  • 如有必要,使文本变小
  • 返回步骤2,直到文本足够小

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

CSS font-size属性接受长度单位,包括以英寸或者厘米为单位的绝对尺寸:

Absolute length units are highly dependent on the output medium, and 
  so are less useful than relative units. The following absolute units 
  are available:
  
  
  in (inches; 1in=2.54cm)
  cm (centimeters; 1cm=10mm)
  mm (millimeters)
  pt (points; 1pt=1/72in)
  pc (picas; 1pc=12pt)

由于我们尚不知道文本有多少个字符,因此可能需要结合使用javascript和CSS才能正确动态设置font-size属性。例如,以字符串的长度(以字符为单位),然后用8.5(假设我们期望使用美国字母大小的纸张)除以字符数,这将为我们提供以英寸为单位的大小,以便将文本。在Firefox,Safari和IE6中对字体大小进行了绝对测量,因此它应该很轻便。希望能有所帮助。

编辑:请注意,我们可能还需要使用诸如字母间距属性之类的设置并尝试使用哪种字体,因为字体大小设置实际上并不是字母的宽度,这会有所不同基于字母间距和字体,与长度成正比。哦,使用等宽字体会有所帮助;)

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