Windows에서 굵은 모노페이스가 수직으로 이동하는 이유는 무엇입니까?

StackOverflow https://stackoverflow.com/questions/2432328

문제

Windows의 Firefox 3.6, IE7 및 Opera 10에서 이 HTML은 이상한 동작을 보입니다.

<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>

가운데의 굵은 범위는 한 픽셀씩 아래로 이동됩니다.다른 글꼴에서는 이런 일이 발생하지 않습니다.

왜 그런 겁니까?어떻게 해결할 수 있나요?

도움이 되었습니까?

해결책

왜 그런 겁니까?

훌륭한 질문입니다.이유를 알아내려고 30분을 보냈지만 소용이 없었습니다.Marcgg의 솔루션도 작동하지 않는 것 같습니다. 오프셋이 여전히 존재합니다.Google은 아무것도 검색하지 않습니다.이것은 언급한 브라우저뿐만 아니라 Opera 9 및 IE6에서도 Windows에서만 발생하는 것 같습니다. 아니다 하지만 Firefox 2.0에서는.수수께끼.

어떻게 해결할 수 있나요?

지금까지 나에게 효과가 있었던 유일한 해결책은 다음과 같습니다.

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

즉, 고정 폭 대신 Courier를 지정합니다.이는 제가 테스트한 모든 브라우저(Windows 2000에서는 IE6, Opera 9, FF 2.0;Ubuntu의 Opera 10, FF 3 및 Konqueror).이유는 아직 잘 모르겠습니다.

다른 팁

그것은 단지 광학 효과 일뿐입니다. 스크린 샷을 잡고 확대 : 텍스트 기준이 전혀 변경되지 않는다는 것을 알 수 있습니다.

다른 색상 대비를 선택하면 자체를 수정해야합니다.

업데이트

Alt Text http://img690.imageshack.us/img690/421/opticaleffect.png

문제는 "Monospace"가 요청 될 때 가장 많은 Windows 브라우저를 사용한 기본 글꼴 인 글꼴 "Courier New"입니다. 대담한 변형의 경우, 기준선은 다른 오프셋에 있습니다.

<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>

이 코드를 사용하면 중간 텍스트가 위로 이동되었음을 알 수 있지만 (= 다른 기준선 오프셋) 배경색이 제대로 정렬됩니다.

해결책은 "Courier"를 글꼴로 요청하고 "Courier New"를 피하는 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top