Why does filter css make text bold?

Question

I want to set text color based on background-color via css, but for some reason filter css makes text bold, but only for light backgrounds

.container {
  background-color: white;
  color: white;
}

.text {
  filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
}

.container-gray {
  background-color: #f0f8ff;
  color: #f0f8ff;
}

.container-black {
  background-color: black;
  color: black;
}

<div class="container">
  <div class="text">Text</div>
</div>

<div class="container-gray">
  <div class="text">Text</div>
</div>

<div>Text</div>

<div class="container-black">
  <div class="text">Text</div>
</div>

Answer 1

At the normal zoom of 100% in Chrome, there does appear to be a difference in boldness, however when you zoom to 500% in Chrome it is clear that there is no difference between the white bold text on a black background and the black bold text on the white background.

I checked this in Firefox and it is the same there at 500%.

BTW, I zoomed the image produced by running the code in the Stackoverflow code snippet (using the Chrome or Firefox zoom menu option)