@ font-face의 CSS 문제

Question

그래서 저는이 새로운 시작 웹 사이트를 프론트 엔드로 코딩하고 있으며 특정 글꼴을 사용하고 있습니다. @ font-face를 사용하고 있으며 모든 브라우저에서 글꼴이 표시되지만 일부 문제는 다음과 같습니다.

1) 글꼴이 픽셀 화되어 다소 추한 것 같습니다. 이 문제는 다른 글꼴들과 함께 나에게 실제로 일어났습니다. 누군가 내가 글꼴을 매끄럽게하는 방법을 추천한다면 행복 할 것입니다.

2) 오페라와 사파리에서 폰트는 정상적으로 렌더링되지만 (여전히 픽셀 화되어 있음) IE, Firefox 및 Chrome에서는 보통보다 굵게 렌더링됩니다. font-weight를 넣으려고했으나 글꼴이 어떤 무게도 지원하지 않으므로 정상입니다. 그 문제에 대한 아이디어가 있습니까?

저는이 글꼴을 정말로 원합니다. 어떻게 모든 사람이 글꼴 문제를 렌더링하는 데 문제가 있는지 이해할 수 없습니다. 내가 뭔가를 놓치기를 바란다.

Answer 1

@ font-face는 OS 글꼴 렌더링 엔진을 사용하기 때문에 사용중인 OS에 따라 다릅니다. Windows XP에서 제대로 작동하는 것을 잊어 버리십시오. Windows 7은 IE7/8에서도 꽤 잘 작동합니다.

글꼴을 들쭉날쭉하게 만드는 원인 중 하나는 Cleartype 옵션입니다. 해제하면 글꼴이 이미 앤티 앨리어스 처리되었으므로 불필요한 앤티 앨리어싱이 추가로 수행되지 않으므로 가장자리를 고정시켜야합니다. . 당신의 헤더 - 클라이언트 측에 클리어 을 해제하는

한 가지 방법은 (0도에 의해 회전 것처럼 효과를 유발 제외하고 아무것도하지 않습니다 그래서 그냥 몇 가지 간단한 속성을 사용)는 IE 특정 filter: 속성을 적용하는 것입니다 in css - 필터 렌더링과 Cleartype 렌더링 간의 충돌을 피하기 위해 IE가 cleartype을 해제합니다. 그러나 이것은 IE 만 고칠 것입니다.

웹 키트 전용 -webkit-font-smoothing도 잘 작동하며 크롬 및 css3 font-smooth (이 기능을 사용하지 않았으므로 결과 나 지원되는 브라우저에 대해서는 알려줄 수 없음)에 도움이 될 수 있습니다.

선택한 글꼴을 실제로 유지하려는 경우 할 수있는 가장 확실한 작업은 Cufon 또는 이와 유사한 글꼴 대체자를 사용하는 것입니다. 내 경험에 비추어 볼 때 추가 스크립트로드로 작업을 수행합니다.

전체적으로 @ font-face에는 모든 브라우저와 시스템에서 동일하게 보일 수있는 확실한 해결책이 없습니다.