Bootstrap default font has issue with Chrome Print

[declum]

1. Goto: https://v4-alpha.getbootstrap.com/
2. Right Click, Try to take print out in chrome.

You will see first character of heading is either moved up or moved down.
Notable Sentences:
"Easy to get started."
"Managed dependencies"

This issue observed only in Chrome
I am using "Windows 10 / Chrome Version 57.0.2987.110 (64-bit)"

[mdo]

Yeah, see it in macOS, too.

[justonsky]

I see it as well (using Ubuntu 16.04).

[bschlosser]

This doesn't seem to be font related. I tried with sans-serif, serif, and Arial on macOS and they all exhibit the same up and down shift.

You can make the issue appear using the Dev Tools

1. (Three dot menu)->More Tools->Rendering set Emulate CSS Media to print
2. Inspect the h2 element for "Easy to get Started"
3. In the Styles pane, disable and reenable the font-size property on the h2 class

You should then see the problem.

To temporarily "fix it", scroll down in the Styles pane and find the
@media print *, ::after, ::before, blockquote::first-letter, blockquote::first-line, div::first-letter, div::first-line, li::first-letter, li::first-line, p::first-letter, p::first-line selector and disable all of the text and box shadow properties, it looks correct, both on screen and printed.

More specifically it looks like the div::first-letter selector in combination with the text and box shadow properties are the key.

[patrickhlauke]

Closing this as duplicate of #21771