How to remove an ambiguity in the font?

5a97e03bc17a3178158923.jpeg
To the left as it should be, right how it happened.
I do not understand why the difference.
On the left is a screenshot from the browser, i.e. not a picture from photoshop. The styles are copied one to one, why so? Watched the styles using the browser console too, all the same.
Maybe there's something I don't know.
The same code is inserted into Kogepan - normally displayed. On the website blurry.
https://codepen.io/anon/pen/jZdeVz
June 7th 19 at 15:04
2 answers
June 7th 19 at 15:06
And this is exactly the same font? In my opinion, no.
I suspect that is due to the fact that in one case, OpenSRS cyrillic and the other not?!?! - Nedra3 commented on June 7th 19 at 15:09
I suspect that web font in one case connected and loaded, but not in another and is replaced by preferences that. - Evie commented on June 7th 19 at 15:12
Just different algorithms display
And, no, different fonts, letter To another. In the first case, probably the font is not loaded and is replaced by Arial or whatever the default is - Tod commented on June 7th 19 at 15:15
Yeah, looks like Arial to the left and to the right Open Sans (which is known by And elephant) - Evie commented on June 7th 19 at 15:18
June 7th 19 at 15:08
Different programs have different algorithms for displaying bitmap fonts. You will be surprised, but even in three different browsers (Firefox, Chrome, IE) will look differently. And that's just on one OS, and if the same browsers to take on Linux or Mac (except IE) - there is also your results will be different from Windows.
Moreover, in photoshop you can choose to text 5 algorithms of rendering

P. S. But in your example you have a font not loaded, because it appears as a standard instead.

Find more questions by tags CSS