2013-01-23 2 views
17

검은 색 바탕에 흰색 텍스트를 사용하면 텍스트가 보일 때보 다 훨씬 더 보입니다. 그것의 순수한 텍스트와 CSS. 나는 typekit.org 글꼴을 사용하고 있습니다.CSS - 검은 색 바탕에 흰색 텍스트가 굵은 글꼴로 표시됩니다.

enter image description here enter image description here

이 문제를 해결하는 방법이 있나요 아니면 앤티 앨리어싱 문제의 어떤 종류입니까?

+6

아니요, 이것은 착시 현상입니다. 포토샵에서 열고 색상을 뒤집습니다. –

+3

@BenjaminGruenbaum - 방금했는데 똑같이 보이지 않습니다. – Philip

+0

어쩌면 내가 똑같이 보이기 때문에 나는 예술가의 눈을 가지지 않을 것입니다 :/ –

답변

28

브라우저에서 앤티 앨리어싱 알고리즘을 사용하기 때문에 텍스트가 굵게 표시됩니다. 확인할 수 있습니다. IE, Safari, Firefox 및 Chrome에서 screengrabs를 사용하십시오. 그들은 모두 다른 앤티 앨리어스입니다. 일부는 텍스트를 다른 텍스트보다 두껍게 보입니다. 일반적으로 더 좋은 텍스트는 검은 색으로 흰색으로 보입니다.

여기에 대한 자세한 설명 있습니다 : http://www.lighterra.com/articles/macosxtextaabug/

대부분의 브라우저에서이 꺼집니다 앤티 앨리어싱 : 사실

body { 
-webkit-font-smoothing: antialiased; 
-moz-font-smoothing: antialiased; 
-o-font-smoothing: antialiased; 
} 
+4

네,이 작품이 - 사람들이 착각을 일으키려고하면 분명히 귀찮을 때가 있습니다. – advert2013

+1

내가 MOZ 버전 -moz-OSX-글꼴 다듬기해야한다고 생각 : 그레이 스케일 참조 [이 답변] (http://stackoverflow.com/a/17927764/896907) – josef

+0

흠, 난 아직 크롬에 두꺼운 글꼴 렌더링을 얻을/흰색 텍스트 창이. –

-3

나는 CSS가 텍스트를 굵게 만드는 규칙을 넣지 않으면 CSS가 당신에 의해 정의된다는 착시 현상이라고 생각합니다. 그러면 대담 할 수 없습니다.

+0

나는 그것이, 자극적 이다을 추측한다. – Philip

+4

SO가 제안했기 때문에 내 downvote와 함께 댓글을 달았습니다. 아니요, 착각이 아닙니다. 프론트 엔드 개발에 사용되는 기술은 그렇게 잘라내어 말라 버립니다. DOM API에서부터 CSS의 미학에 이르기까지 모든 것은 각 브라우저의 다양한 구현에 따라 달라지며 이러한 변형은 우리 중 일부에게는 매우 문제가 될 수 있습니다. –

+5

환상은 아니지만 실제 버그입니다. –

7

는, 그것이 knownbug이다는 :

내가 해결 할 수 있었다 이것을 사용하여 :

-webkit-font-smoothing:antialiased 

출처 : this article (cached on archive.org).

다소 늦었지 만 일부 사용자에게는 여전히 유용 할 수 있습니다.

그냥 기억하십시오 this is not recommended. MacOS를 사용 중이며 어두운 배경에서 밝은 텍스트를 사용하지 않는 한.

+1

링크가 다운되었습니다. 여기 거울 : https://web.archive.org/web/20131019233655/http://tanookilabs.com/your-fonts-look-bad-in-chrome-heres-the-fix – geon

+0

두 보관 문제, 5 년 후 최신 Chrome은 여전히 ​​어두운 배경에 밝은 텍스트를 MacOS에서 완전히 역겨운 방식으로 렌더링합니다. 그게 너무 빨기 ... –

관련 문제