2016-02-25 2 views
1

Я занимаюсь разработкой веб-страницы, которая имеет светлый текст на темном фоне. Когда я пытаюсь распечатать страницу в черно-белом режиме, браузер, похоже, автоматически инвертирует цвета, чтобы не печатать полный картридж. Именно этого я и надеялся.Печать светлого текста в виде темного текста в 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> 

ответ

1

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

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

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

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

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

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

Smashing Magazine имеют некоторые большие ресурсы стилей печати:

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

+0

Да это было именно то, что я искал. Благодаря! – GeneralMike