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

Question

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

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

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

如果这只是一个 CSS3 特性(font-size:max-for-width(7.5in))我会很高兴，但如果是的话，我找不到它.

Answer 1

CSS 字体大小属性接受 length units包括以英寸或厘米为单位的绝对测量值:

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 才能正确地动态设置字体大小属性。例如，将字符串的长度(以字符为单位)除以 8.5(假设您希望使用美国信纸大小的纸张)除以字符数，得到以英寸为单位的大小，以便为该 block 设置字体大小文本。在 Firefox、Safari 和 IE6 中使用绝对测量值测试了字体大小，因此它应该非常便携。希望对您有所帮助。

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