Печатать светлый текст как темный текст в Chrome

Я разрабатываю веб-страницу со светлым текстом на темном фоне. Когда я пытаюсь распечатать страницу в черно-белом режиме, браузер автоматически инвертирует цвета, поэтому для печати не требуется полный картридж. Это именно то, на что я надеялся.

Когда я пытаюсь печатать в Firefox, текст становится полностью черным. Однако в Chrome текст кажется бледным, и это затрудняет чтение. Chrome по-прежнему печатает номера страниц, метки времени и т. д. сплошным черным цветом. Как заставить Chrome печатать текст на моей странице таким же сплошным черным цветом?

Вот пример, показывающий точные цвета, которые я использую, и он воспроизводит поведение, которое я вижу на своей реальной странице.

<body>
    <form id="form1">
    <div>
        <table style="background-color:#2D3541; width:900px; height:900px">
            <tr>
                <td style="font-size:medium; text-align:center; color:#B7DBFF">Sample Text</td>
            </tr>
        </table>
    </div>
    </form>
</body>

google-chrome html css visual-web-developer-2010
person GeneralMike    schedule 25.02.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Что вы можете сделать, так это создать так называемую таблицу стилей печати. Это обычная таблица стилей css, загружаемая только тогда, когда пользователь пытается распечатать рассматриваемую веб-страницу. Обычно браузеры стремятся игнорировать определенные атрибуты CSS, которые могут привести к трате большого количества чернил (например, страница имеет цвет фона) и преобразовывают текст в более темные цвета, предполагая, что фон белый.

Это можно изменить, создав новую таблицу стилей печати <link rel="print" href="/css/print.css" или используя медиа-запрос @media print {...}.

Я считаю, что использование отдельной таблицы стилей для печати предпочтительнее, так как браузеры не будут загружать ее до тех пор, пока пользователь не намеревается распечатать страницу.

Указав цвет текста, который вызывает проблему, в вашей таблице стилей печати или медиа-запросе, вы сможете решить проблемы, когда браузеры не принимают ваши правила стиля текста. Если вы переопределяете значение, установленное в другой таблице стилей, поэкспериментируйте с использованием !important, если использование одной таблицы стилей для печати не помогает.

В идеале вы должны дать своему td класс, чтобы дать вам более детальный контроль. Значения в атрибуте стиля имеют более высокий приоритет, чем таблицы стилей, и Chrome может по-прежнему учитывать встроенный атрибут стиля при печати страницы.

@media print {
    .light {
        color: #000 !important;
    }
}

В Smashing Magazine есть отличные ресурсы по стилям печати:

https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

person Kraig Walker    schedule 25.02.2016
comment
Да, это было как раз то, что я искал. Спасибо! - person GeneralMike; 25.02.2016
comment
Я пробую это несколько лет спустя, и это вообще не работает для меня. Белый текст на черном фоне преобразуется в серый независимо от того, какие стили я туда добавляю, даже с печатными медиа-запросами и !important - person TKoL; 06.09.2019