Question

如果我有一个打印CSS样式元素：

border:1px solid black;

或：

border:0.25pt solid black;

打印时线条很厚 - 至少1pt。如果我尝试使用更小的值，例如0.05pt，则该行根本不会出现。我怎么能得到一条细线？在像InDesign这样的程序中，你将“发丝”的厚度设置为0.25pt，即非常细的线条，但不能太薄以至于无法打印。

注意：这个问题似乎问了同样的问题，但是没有人解决线路厚度的实际问题，只是使用的最佳测量单位： pt or px for specifying border-width for print

Answer 1

感谢您的帮助。在这方面，浏览器似乎毫无用处。

我做了一些测试，结论似乎是：

浏览器没有任何打印点尺寸。
您不能假设用户在打印输出上看到宽度小于1.25pt。

我测试了以下网页的变体，每次调整边框点大小。我打印出'fit to page'关闭。

<html>
  <body style="width:17cm; background-color:rgb(245,245,245);">
    <div style="border:0.3pt solid black; width:100%; height:20cm">IE 0.3pt</div>
  </body>
</html>

这些是最小可打印点大小的结果，以及与InDesign中的行打印输出相比的结果。我也包括了一些其他注释：

FF：0.25pt，看起来像1.25pt。 DIV宽度看起来像是17厘米，但由于FF的大量打印边缘，右侧边框被切断。似乎16.5cm是最大的可用宽度。 BODY高度符合页面的高度。

Safari 5：0.75pt，看起来像1pt。 DIV宽度为18.2厘米，BODY宽度为19.5厘米 - 即使没有迹象表明它会这样做，Safari似乎也适合页面。在DIV高度后不久，BODY高度结束。

歌剧11：0.4pt，看起来像0.75pt。 DIV宽度为16.2厘米，BODY背景仅出现在div中 - 尽管文本行显示在白色背景上

IE7：0.4pt，看起来像0.5pt（和0.5pt一样）。与FF一样，DIV宽度看起来像是17厘米，但由于IE的大量打印边缘，右侧边框被切断。

IE9：0.1有效（可能更低），但仍然看起来像0.5pt。否则与IE7相同。

Answer 2

如今，在2015年，使用HTML5和CSS3制作细线有一些解决方法，例如：用于打印或在高分辨率屏幕上：

SVG（即通过分配路径stroke-width: .5）

线性渐变背景

2D变换：缩放

扩展方法在this article中有详细介绍。归结为：

hr.thin { height: 1px; border-top: none; border-bottom: 1px solid black; transform: scaleY(0.33); }

线性渐变方法适用于这些行（双关语，in detail here）：

hr.hairline { height: 1px; background: linear-gradient( transparent 0%, transparent 50%, black 50%, black 100%); }

为简化起见，我使用1px <hr>元素作为示例。但是通过分别缩放元素中的所有样式或分别使用多个背景，两个解决方案都可以扩展为在元素的所有四个边上作为边框。

Answer 3

我发现使用dotted而不是solid的厚度在某些打印场景中有所帮助，并且渲染为比点更细的（头发）线。

Answer 4

问题可能在于浏览器重新缩放页面（至少IE用于在打印时执行此操作），但正如我现在在Opera中测试它（没有重新缩放），线仍然不像发际线那么薄。但是，我总是使用它来实现薄边框效果：

p {
  border: 0.4pt solid #CCC;
}

这将创建非常浅灰色的边框。正如Barry Kaye提出的那样，你也可以让它dotted看起来更瘦。

Answer 5

我建议首先使用将HTML文档转换为PDF的工具。然后，您可以打印PDF并获得一致的结果。 Wkhtmltopdf对此非常有用，因为它基于最符合标准的Web渲染引擎。

使用wkhtmltopdf时，您可以将缩放设置为大于1的值以获得更细的线条。将线宽设置为0.25pt，并使用以下命令。

wkhtmltopdf -T 0 -B 0 -L 0 -R 0 -s A4 --zoom 10 <URL> <output filename>

现在你的线条很细。当您指定更高的缩放值时，渲染更精确，因此看起来略有不同。

要获得最佳效果，请使用以下单位：mm，cm和pt而不是px。

Answer 6

我发现 B.Martin 的答案最有用。以下是我可以添加的内容：

<强>理论

在物理上，头发的宽度（毛发宽度）在17到181微米之间。即0.02至0.2毫米或0.05至0.5微米。

因此，使线条窄于0.1pt并没有多大意义，因为眼睛可能看不到它们。

CorelDraw的发际线为0.23pt或81微米。

<强>实践

事实上，wkhtmltopdf工具可以方便地创建细线。我设法实现了以下宽度：

0.1pt，缩放系数为8
0.2pt，缩放系数为4（这更实用，因为在这种情况下a4会缩放到通用尺寸a0）

我没有测量线条的实际宽度，但它看起来与我的CorelDraw的“发际线”几乎相同。

NB将宽度从0.1pt更改为0.15pt（缩放= 8）或从0.2pt更改为0.3pt（缩放= 4）不会改变生成的线宽，至少在视觉上是这样。

所以，我带来的是：

wkhtmltopdf -s A0 --zoom 4 <input filename> <output filename>

提供了一个漂亮的A0大小的页面，可以在打印时自动缩放到A4 - 此阶段也不会丢失毛发线。

<强>更新我终于设法使用Acrobat插件来测量它：-s A0 --zoom 4在a0上变为0.6pt后的原始0.3pt线（缩小后为0.15pt），这对我来说已经足够了。

在CSS中指定用于打印的细线厚度

6 个答案: