Windows에로드 된 글꼴은 정말 나빠 보입니다. 어떤 글꼴을 사용하여 더 잘 렌더링합니까?

편집 : 문제는 Vista의 설정에서 "Cleartype"을 설정하지 않았다는 것입니다. Windows OS에서 Cleartype이 설치 / 활성화되어 있으면이 질문에 큰 의미가 없을 수 있습니다.

CSS3의 font-face 속성으로 OS / 시스템 이외의 글꼴을로드 할 수있는 새로운 타이포그래피 바람이 웹에 등장했습니다. 내 Windows 컴퓨터가 아닌 동안 Mac이 완벽하게 렌더링됩니다. Windows에서 더 잘 렌더링 할 수있는 글꼴 세트는 무엇입니까?

이것은 스택 오버플로에 대한 질문과 유사합니다.

그리고 Myriad Pro를 사용하여 PC에서 잘못 렌더링 된 웹 사이트의 예 : http://css-tricks.com/

참고 : IE9와 IE6과 같은 브라우저 버전의 앤티 앨리어싱 차이점에 대해서는 이야기하지 않습니다.

귀하의 테스트, 글꼴 목록 및 글꼴 크기 (px를 사용하십시오)에 대한 대답으로, 또는 짧은 텍스트 또는 작은 제목에 사용할 수있는 방식으로 대답합니다.

예를 들어, 현재 "League Gothic, 30px"는 다음과 같습니다.

이것은 주석이어야하므로 (이 CW를 만드는) 질문에 약간의 오해와 잘못된 가정이 있다고 생각합니다. 당신은 분명히이 질문에 답하기를 원하기 때문에 (결국 현상금을 제공했습니다) 여기 2 센트가 있습니다.

스크린 샷에서 하위 픽셀 렌더링과 달리 글꼴을 정기적으로 렌더링하도록 Windows를 설정했으며 브라우저에서 앤티 앨리어싱을 수행하지 않을 수도 있습니다 (그렇지 만 JPG 압축으로 사라짐).

Windows를 다루는 다음 예제는 XP Pro SP 3에서 가져온 것이므로 Vista 및 7에서 상황이 최소한 같은 수준 이라고 가정하는 것이 안전합니다 .

Windows에는 ClearType을 사용하거나 사용하지 않는 XP 옵션이 있습니다. ClearType이 없으면 글꼴이 스크린 샷과 같이 렌더링됩니다. 이것은 CT없이 Windows 대화 상자에서 크게 확대 된 이미지입니다.

픽셀이 검은 색이거나 투명 인 이진 연산입니다. CT가 없어도 최신 브라우저를 사용하면 앤티 앨리어싱을 수행 할 수 있습니다. 이것은 Windows XP 및 Chrome 8이 설치된 css-tricks.com에서 가져온 것이며 CT는 OFF입니다 (이전 그림과 동일).

무슨 일이 있었는지 봅니까? 아마도 당신은 당신의 질문에 명시된 것처럼 이미했을 것입니다.

참고 : IE9와 IE6과 같은 새 브라우저와 이전 브라우저 사이의 앤티 앨리어싱 차이에 대해서는 이야기하지 않습니다.

이제 ClearType !

이번에는 CT를 사용하여 Windows 대화 상자에서 정확히 동일한 텍스트를 보았습니다.

이것이 무엇인지에 관심이 있다면, 서브 픽셀 렌더링 에 관한 Wikipedia 기사를 참조하십시오 . ClearType을 켜면 브라우저 렌더링에 영향을 줍니까? Windows XP 및 Chrome 8에서 ClearType이 ON 인 동일한 "기타"텍스트 :

그렇습니다! 그리고 우리가 그것을하고있는 동안, 나는 IE 레벨이 Windows 레벨에서 비활성화되어 있어도 IE 8이 ClearType 렌더링을 사용한다고 덧붙일 수 있습니다.

앤티 앨리어싱 된 텍스트와 ClearTyped 텍스트를 100 %로 비교하는 것은 ClearTyped 텍스트를 앤티 앨리어싱되지 않은 텍스트와 비교하는 것만 큼 급진적이지 않습니다. 그러나 눈에 띄게 더 대담합니다.

aa : CT :

같은 그 모습을 확인하려면 없이 앤티 앨리어싱, 그냥보고 littlemad의 스크린 샷 .

그리고 비교를 위해 여기에 OS X의 기본 렌더링에서 동일한 "기타"가 있습니다 : ClearType보다 훨씬 더 대담합니다.

질문에 대답하려면 : any font . 운영 체제에서 글꼴을 다르게 렌더링하는 경우 운영 체제에서 글꼴을 렌더링하도록 설정했기 때문일 수 있습니다 . 또는 브라우저가 앤티 앨리어싱 또는 ClearType을 지원하지 않을 수 있습니다.

또 다른 질문은 일부 글꼴이 올바르게 렌더링되는 이유와 그렇지 않은 이유입니다. 아니면 어떤 렌더링 없이도 적절한 글꼴을 요구합니까?

또한 자주 묻는 질문에 대한 답변도 있습니다. "예, ClearType이 OS X의 렌더링과 다른 이유는 무엇입니까?"

그들은 다르기 때문에. 서브 픽셀 렌더링은 구현하기에 가벼운 것이 아닙니다. ClearType은 Microsoft의 등록 상표이며 10 개의 특허 로 보호됩니다 (+ 1 출원 중, wikipedia 참조 ). 그들은 단지 같을 수 없습니다 .

문제가 참조하는 Stackoverflow 질문 과 동일 하면 대답도 동일 하지 않습니까?

즉 A의 힌팅 문제.

서체 키트 (예 : FontSquirrel)를 생성 할 때 전문가 옵션에 힌트를 지정해야합니다.

전문가를 선택하고 렌더링에서 다음을 선택하십시오.

힌트 적용-Win 렌더링을 향상시킵니다.

ttfautohint 를 사용하여 글꼴의 힌트 바이트 코드를 다시 작성할 수 있습니다. 기본 설정 (GDI 호환)은 윈도우가 글꼴을 렌더링하는 데 도움이됩니다.

이것은 브라우저와 관련이 없지만 창 자체와 관련이 있습니다.

* nix 시스템 (유닉스 기반을 가지고 있기 때문에 유닉스 / 리눅스 및 OSX가 여기에 포함됨)에는 텍스트가 표시되는 방식을 미세하게 제어 할 수있는 옵션이 있으며 일반적으로 서브 픽셀 렌더링으로 설정되어 있습니다. '당신에게 줄 것이지만, 본질적으로 하위 픽셀 (화면 픽셀의 빨간색, 녹색 및 파란색 부분)을 사용하여 텍스트를 렌더링합니다.) Windows에서 cleartype을 사용하는 경우, 나는 자신의 렌더링 유형입니다. 역학에 퍼지.

Windows가 서브 픽셀 렌더링을하는 것이 아니라 글꼴이나 파일이 아니라 운영 체제가 해당 글꼴과 파일을 표시한다는 것입니다.

Windows XP에서 ClearType 켜기 :

1) 다음 지침을 따르십시오 : http://blogs.msdn.com/b/virtual_pc_guy/archive/2011/10/05/enabling-cleartype-on-windows-xp-mode.aspx

2) 이제 IExplorer에서 다음을 따르십시오. http://www.microsoft.com/typography/cleartype/tuner/step1.aspx

CSS에서 아래 코드를 사용하십시오.

-webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

도움이 될 수 있습니다