CSS color property not working properly on @media print

Question

I am creating a web application that basically consists of a large form, which can then be printed after submission.

However, the text in my print document is never affected by either properties coloror font-weightCSS.

Here is a small section of the document that looks like on the screen:

However, when printed, it looks like this:

The font is the same, but for some reason styles are not applied to it. I don't have NO overriding CSS settings for @media print, so shouldn't it look exactly the same?

Why don't my normal styles apply to a print document (by print document, I mean the document that appears when you click the "Print" button on the browser)?

: , , :

@media print {

    html {
        margin: 0;
        padding: 0;
        width: 100%;
        font-size: 0.9em;
        color: yellow !important;
    }
}

, , !important. , .

Answer 1

: Bootstrap.

Chrome, "", :

, , :

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; // Black prints faster: h5bp.com/s
        box-shadow: none !important;
        text-shadow: none !important;
    }

    // Other code...
}

Bootstrap * !important, html {color: yellow !important} - CSS-.

, Bootstrap, !important.

Answer 2

, ( ):

html {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 100px;
  color: red !important;
}
@media print {
  html {
    color: yellow !important;
  }
}

Red for web, Yellow for print

Hide result

(ish 0 , , , ). , , .