All geek questions in one place

Why a bold monophonic shift vertically in Windows?

On Firefox 3.6, IE7, and Opera 10 on Windows, this HTML has weird behavior:

<html><head></head>
<style>
span {
    font-family: monospace; background-color: green;
}
span.b {
    font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

The bold gap in the middle is shifted by one pixel. This does not happen for other fonts.

Why? How can i fix this?

+3
source share
3 answers

Why is this?

Great question. Just spent half an hour trying to figure out why, to no avail. Marcgg's solution doesn't seem to work either, the offset still exists. Google does not appear. This is similar to Windows, not just the browsers you mention, but also in Opera 9 and IE6. However, not in Firefox 2.0. Incomprehensible.

How can i fix this?

, , :

span {
    font-family: Courier; background-color: green;
}
span.b {
    font-weight: bold;
}

I.e., Courier . (IE6, Opera 9, FF 2.0 Windows 2000, Opera 10, FF 3 Konqueror Ubuntu). , .

+1

"Courier New", , Windows "". :

<html><head></head>
<style>
span {
    font-family: "Courier New"; background-color: green;
}
span.b {
    font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

, (= ), .

The solution is to request Courier as a font and avoid Courier New.

0
source

Source: https://habr.com/ru/post/1736646/

More articles:


All Articles