我的网站在打印时会缩放，使黑色文本看起来是灰色的

Question

I have a completely fluid website that is designed primarily for printing. It stretches beautifully to any window or paper size:

body { width: 100%; }

However, for printed pages, some of my black lines and text become grey and I have 1px lines that don't print as solid lines, but more of a fuzzy grey dotted line. This seems to be because browsers are scaling the page on print, like the "Shrink To Fit" of IE.

So I see two options.

1. Specify line widths and font sizes using css units that work well on print, potentially fighting against browsers in-built mechanisms to make pages print well when everything is specified in pixels. This question works at part of that without much success.

2. Find the body width ( 8.5in ? 7.5in ? 90% ? 800px ?) which makes lines solid and text black for 8.5 inch wide paper.

Which approach is likely to be successful?

Answer 1

You might consider using a separate stylesheet for print media, or perhaps just override offending styles with a @media print { /* rules here */} block at the end of your current stylesheet.

If you are designing a website for both screen and print, this will give you the most flexible way to independently control styling for both media.

Answer 2

It could be an issue with the printer quality. 1px rendered in hi-res looks a bit different when it comes out of a 5 year old printer with print quality set to "fast draft".

Two easy troubleshooting options to try:

1. Either increase the print quality and print in full color, or try it from a different printer.

2. If it's possible, perhaps you could try to thicken the lines a bit? I know it may not work with your design, but sometimes the simplest answers are best.

Good luck man.