在 CSS 中指定细线粗细以进行打印
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9978335/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Specify hairline thickness in CSS for printing
提问by user535673
If I have a print CSS styling an element with:
如果我有一个打印 CSS 样式的元素：
border:1px solid black;
or:
或者：
border:0.25pt solid black;
The line is very thick when it prints – at least 1pt. If I try a much smaller value, such as 0.05pt, the line doesn't appear at all. How can I get a thin line? In programs like InDesign you set the thickness to 0.25pt for a 'hairline', i.e. a very thin line but not so thin that it won't be printable.
打印时线条很粗 - 至少 1pt。如果我尝试更小的值，例如 0.05pt，则该线根本不会出现。我怎样才能得到一条细线？在像 InDesign 这样的程序中，您将“细线”的粗细设置为 0.25pt，即非常细的线条，但又不会太细以至于无法打印。
Note: this question seems to ask the same thing, but nobody has addressed the actual issue of the line thickness, merely the best units of measure to use: pt or px for specifying border-width for print
注意：这个问题似乎问了同样的问题，但没有人解决线条粗细的实际问题，只是使用的最佳度量单位： pt 或 px 用于指定打印的边框宽度
回答by user535673
Thanks for your help. It would seem that browsers are just useless in this respect.
谢谢你的帮助。似乎浏览器在这方面毫无用处。
I've done some more testing and the conclusion seems to be:
我做了更多的测试，结论似乎是：
- No browser is any good at printing point sizes.
- You can't assume users will see a width less than 1.25pt on a prinout.
- 没有浏览器擅长打印点大小。
- 您不能假设用户会在打印输出上看到小于 1.25pt 的宽度。
I tested variations of the following web page, adjusting the border point size each time. I printed with 'fit to page' turned off.
我测试了以下网页的变体，每次都调整边框点大小。我打印时关闭了“适合页面”。
<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>
These are the results of the minimum printable point size and what it looks like compared to a printout of lines from InDesign. I've included a few other notes, too:
这些是最小可打印点大小的结果，以及与 InDesign 中线条的打印输出相比的外观。我还包括了一些其他注释：
FF: 0.25pt, looks like 1.25pt. DIV width looks like it is 17cm, but because of FF's massive print margins the right-hand border gets cut off. It seems 16.5cm is the largest usable width. The BODY height fits the height of the page.
FF：0.25pt，看起来像1.25pt。DIV 宽度看起来是 17 厘米，但由于 FF 的大量打印边距，右侧边框被切断。16.5cm 似乎是最大的可用宽度。BODY 高度适合页面的高度。
Safari 5: 0.75pt, looks like 1pt. DIV width is 18.2cm and BODY width is 19.5cm - Safari appears to be fitting to page even though there's no indication that it would do this. The BODY height finishes shortly after the DIV height.
Safari 5：0.75pt，看起来像 1pt。DIV 宽度为 18.2 厘米，主体宽度为 19.5 厘米 - Safari 似乎适合页面，即使没有迹象表明它会这样做。BODY 高度在 DIV 高度之后不久结束。
Opera 11: 0.4pt, looks like 0.75pt. DIV width is 16.2cm and the BODY background only appears within the div - although the line of text, appears on a white background
Opera 11：0.4pt，看起来像 0.75pt。DIV 宽度为 16.2cm 并且 BODY 背景仅出现在 div 内 - 尽管文本行出现在白色背景上
IE7: 0.4pt, looks like 0.5pt (as does 0.5pt). As with FF, DIV width looks like it is 17cm, but because of IE's massive print margins the right-hand border gets cut off.
IE7：0.4pt，看起来像 0.5pt（0.5pt 也是如此）。与 FF 一样，DIV 宽度看起来是 17 厘米，但由于 IE 的大量打印边距，右侧边框被切断。
IE9: 0.1 works (and possibly lower), but still looks like 0.5pt. Otherwise same as IE7.
IE9：0.1 有效（可能更低），但看起来仍然像 0.5pt。其他与IE7相同。
回答by Avant la lettre
Nowadays, in 2015, there are a few workarounds to produce hairlineswith HTML5 and CSS3, e.g. for printing or on high res screens:
如今，在 2015 年，有一些解决方法可以使用 HTML5 和 CSS3生成细线，例如用于打印或在高分辨率屏幕上：
- SVG (i.e., by assigning a path
stroke-width: .5) - linear gradient backgrounds
- 2D transforms: scaling
- SVG（即通过分配路径
stroke-width: .5） - 线性渐变背景
- 2D 变换：缩放
The scalingapproach is described in detail in this article. It boils down to this:
的缩放方法详细描述于本文中。归结为：
hr.thin {
height: 1px;
border-top: none;
border-bottom: 1px solid black;
transform: scaleY(0.33);
}
The linear gradientmethod works along these lines (pun intended, in detail here):
的线性梯度方法沿着这些线（双关语意，工作在这里详细）：
hr.hairline {
height: 1px;
background: linear-gradient(
transparent 0%,
transparent 50%,
black 50%,
black 100%);
}
To simplify things, I have used a 1px <hr>element as an example. But by scaling all styles within an element, or with multiple backgrounds respectively, both solutions may be expanded to work as a border on all four sides of an element.
为简化起见，我使用了一个 1px<hr>元素作为示例。但是通过缩放一个元素内的所有样式，或者分别使用多个背景，这两种解决方案都可以扩展为元素所有四个边的边框。
回答by Barry Kaye
I have found using a thickness of dottedinstead of solidhas helped in some print scenarios and renders as more of a thinner (hair) line than dots.
我发现使用厚度dotted而不是solid在某些打印场景中有所帮助，并且呈现出比点更细的（头发）线。
回答by FurloSK
Problem might be in browser rescaling the page (at least IE used to do it when printing), but as I tested it now in Opera (no rescale), line still isn't really thin as hairline. However, I am always using this to achieve thin border effect:
问题可能在于浏览器重新缩放页面（至少 IE 在打印时曾经这样做），但正如我现在在 Opera 中测试它（没有重新缩放），线条仍然没有像细线那样细。但是，我总是使用它来实现细边框效果：
p {
border: 0.4pt solid #CCC;
}
This will create very light gray border. As Barry Kaye has proposed, you can also make it dottedto look thinner.
这将创建非常浅的灰色边框。正如 Barry Kaye 所建议的，你也可以让它dotted看起来更瘦。
回答by B. Martin
I suggest to use a tool which converts the HTML document to a PDF first. Then you can print the PDF and get consistent results. Wkhtmltopdf is very good for that because it's based on the most standard compliant web rendering engine.
我建议先使用将 HTML 文档转换为 PDF 的工具。然后您可以打印 PDF 并获得一致的结果。Wkhtmltopdf 对此非常有用，因为它基于最符合标准的 Web 渲染引擎。
When using wkhtmltopdf you can set the zoom to a value above 1 to get thinner lines.
Set the line width to something like 0.25ptand use the following command.
使用 wkhtmltopdf 时，您可以将缩放设置为大于 1 的值以获得更细的线条。将线宽设置为类似的值0.25pt并使用以下命令。
wkhtmltopdf -T 0 -B 0 -L 0 -R 0 -s A4 --zoom 10 <URL> <output filename>
Now you get really thin lines. When you specify a higher zoom value the rendering is more precise and looks therefore slightly different.
现在你得到了非常细的线条。当您指定更高的缩放值时，渲染更精确，因此看起来略有不同。
To get the best results use the following units: mm, cm and pt instead of px.
要获得最佳结果，请使用以下单位：mm、cm 和 pt 而不是 px。
回答by Antony Hatchkins
I found B.Martin's answer most useful. Here's what I can add to it:
我发现B.Martin的回答最有用。这是我可以添加的内容：
Theory
理论
Physically the width of a hair (hairwidth) is between 17 and 181 microns. That is 0.02 to 0.2 mm or 0.05 to 0.5 pt.
物理上一根头发的宽度（hairwidth）在 17 到 181 微米之间。即 0.02 至 0.2 毫米或 0.05 至 0.5 磅。
So making lines narrower than 0.1pt doesn't make much sense since eye might not see them.
所以使线条窄于 0.1pt 没有多大意义，因为眼睛可能看不到它们。
CorelDraw's hairline is 0.23pt or 81 micron.
CorelDraw 的细线为 0.23pt 或 81 微米。
Practice
实践
In fact, wkhtmltopdftool is handy for creating thin lines. I've managed to acheive the following widths:
事实上，wkhtmltopdf工具对于创建细线很方便。我设法实现了以下宽度：
- 0.1pt with zoom factor of 8
- 0.2pt with zoom factor of 4 (which is more practical since a4 is zoomed to a common size a0 in this case)
- 0.1pt，缩放系数为 8
- 0.2pt，缩放系数为 4（这更实用，因为在这种情况下 a4 被缩放到一个常见的大小 a0）
I didn't measure the real width of the line but it looks pretty much the same as 'hairline' of my CorelDraw.
我没有测量线的实际宽度，但它看起来与我的 CorelDraw 的“细线”几乎相同。
NB Changing the width from 0.1pt to 0.15pt (zoom=8) or from 0.2pt to 0.3pt (zoom=4) doesn't change the resulting line width, at least visually.
NB 将宽度从 0.1pt 更改为 0.15pt (zoom=8) 或从 0.2pt 更改为 0.3pt (zoom=4) 不会改变生成的线宽，至少在视觉上是这样。
So, what I've come with is:
所以，我带来的是：
wkhtmltopdf -s A0 --zoom 4 <input filename> <output filename>
gives a pretty A0-sized page which can be automatically scaled back to A4 when printing - no hairwidth lines are lost on this stage as well.
提供了一个漂亮的 A0 大小的页面，打印时可以自动缩小到 A4 - 在这个阶段也不会丢失头发宽度的线条。
Update:I've finally managed to measure it using an Acrobat plugin: original 0.3pt line after -s A0 --zoom 4becomes 0.6pt on a0 (that is 0.15pt after downsizing) which is quite enough of a hairline for me.
更新：我终于设法使用 Acrobat 插件对其进行了测量：原来的 0.3pt 线-s A0 --zoom 4在 a0 上变为 0.6pt（缩小后为 0.15pt），这对我来说已经足够了。
