15

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

border:1px solid black;

或者：

border:0.25pt solid black;

打印时线条很粗——至少 1pt。如果我尝试一个更小的值，例如 0.05pt，这条线根本不会出现。我怎样才能得到一条细线？在 InDesign 之类的程序中，您将“细线”的粗细设置为 0.25pt，即一条非常细的线，但不会太细以至于无法打印。

注意：这个问题似乎问同样的事情，但没有人解决线宽的实际问题，只是使用的最佳测量单位： pt 或 px 用于指定打印的边框宽度

4

7 回答 7

12

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

我做了更多的测试，结论似乎是：

  • 没有浏览器擅长打印点大小。
  • 您不能假设用户会在打印输出上看到小于 1.25pt 的宽度。

我测试了以下网页的变体，每次调整边界点大小。我打印时关闭了“适合页面”。

<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.5 厘米是最大的可用宽度。BODY 高度适合页面的高度。

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

Opera 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 相同。

于 2012-04-04T08:25:46.763 回答
10

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

  1. SVG（即，通过分配路径stroke-width: .5）
  2. 线性渐变背景
  3. 2D 变换：缩放

本文详细介绍了缩放方法。归结为：

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

线性渐变方法沿着这些思路工作（双关语，在此处详细说明）：

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

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

于 2015-11-18T15:40:16.453 回答
4

我发现在某些打印场景中使用厚度dotted代替而不是solid有助于呈现比点更细的（头发）线。

于 2012-04-02T14:40:29.107 回答
4

问题可能在于浏览器重新缩放页面（至少 IE 曾经在打印时这样做），但正如我现在在 Opera 中测试的那样（没有重新缩放），线条仍然不像细线那么细。但是，我总是使用它来实现细边框效果：

p {
  border: 0.4pt solid #CCC;
}

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

于 2012-05-29T07:47:50.247 回答
1

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

理论

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

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

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

实践

事实上，wkhtmltopdf工具对于创建细线很方便。我设法达到了以下宽度：

  • 0.1pt，缩放系数为 8
  • 0.2pt，缩放因子为 4（这更实用，因为在这种情况下 a4 被缩放到普通大小 a0）

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

注意 将宽度从 0.1pt 更改为 0.15pt (zoom=8) 或从 0.2pt 更改为 0.3pt (zoom=4) 不会改变结果线宽，至少在视觉上是这样。

所以，我带来的是：

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

给出了一个漂亮的 A0 大小的页面，打印时可以自动缩小到 A4 - 在这个阶段也不会丢失任何头发宽度线。

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

于 2015-04-21T17:56:34.510 回答
1

我建议先使用将 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。

于 2013-11-22T17:34:42.770 回答
0

我使用伪元素和缩放想出了一个聪明但有点笨拙的技巧。到目前为止，它适用于所有内容，并且可以轻松修改（边框顶部，边框左侧......）。例如，它可以用作一个类，因为它的高度/宽度不是硬编码的。这是一个例子：

.thinborders {
  /* not needed */
  width: 300px;height: 300px;margin: 50px;padding: 15px;background-color: #ccc;

  /* very important */
  transform: scale(1); /* position: relative; might also work, but not on all elements */
}

.thinborders::before {
  content: "";
  
  position: absolute;
  width: 800%;
  height: 800%;
  top: 0;
  left: 0;
  
  /* change  */
  --border-width: 0.5px;
  
  /* can be border-bottom or anything else */
  border: calc(8 * var(--border-width)) solid black;
  
  transform: scale(12.5%);
  transform-origin: left top;
  
  box-sizing: border-box;
}
<div class="thinborders">
  i have thin borders
</div>

这显然可以做成一个 sass/less mixin 或其他花哨的东西。

这在 Firefox 中不起作用。我只在 Chrome 中测试过。

于 2022-01-06T23:09:36.457 回答