iOS 4.2+ 웹 폰트 (ttf)의 굵은 글꼴 두께 렌더링 버그

iOS 4.2+ 웹 폰트 (ttf)의 굵은 글꼴 두께 렌더링 버그

---

이것은 매우 구체적입니다. font-weight:boldiOS 모바일 사파리에서 ttf 글꼴 렌더링을 잘못 지정 하고 iOS 4.2 / 4.3 베타 3 이상이 설치된 iphone / ipad로 데모 사이트를 엽니 다.

(Google 글꼴의 Reenie + Beanie입니다)

http://jsbin.com/ojeqe3/16/

화면 캡처

굵은 글꼴이 이중 렌더링 된 것처럼 보입니다 . 이것은 중소 글꼴 크기에는 중요하지 않지만 큰 글꼴 크기 / 확대에는 상당히 중요합니다.

내 친구가이 버그를 사과에보고 할 것입니다. 그러나 버그를 해결하기 위해 그가 할 수있는 일은 무엇입니까? (텍스트 조정을 죽이는 것은 좋지 않습니다 )

업데이트 : 이것은 iOS5에서 수정되지 않았습니다 .

내가 아는 가장 좋은 해결책은

1. 사용 font-weight:normal(데모에 표시됨)
2. 중 하나를 사용하여 -webkit-text-strok전자 또는 text-shadow보이게하기 위해 "대담한"(플러스 아이 패드 전용 CSS - JS가 추가 몸 접두사뿐만 아니라 미디어 쿼리)

---

부모 클래스에서 h1상속 하는 것과 동일한 문제가 font-weight: bold;있습니다. 상속 된 스타일을font-weight: normal;

---

Mobile Safari에는 font-faces로 가짜 스타일 을 렌더링하는 버그가있는 것 같습니다 . 굵은 글꼴의 경우 텍스트와 오프셋이 두 배가되고 대부분의 글꼴에서는 눈에 띄지 않지만 얇은 글꼴의 경우 이중 비전처럼 보입니다.

귀하의 경우에는 Reenie 비니는 않는 대담한 스타일을 포함하지 당신이를 변경하지 않고 제목으로 그들을 사용하는 경우, 그리고 font-weight에 normal또는 400굵은 무게 "가짜 스타일"을 렌더링 그것.

가짜 스타일을 사용하는 것은 일반적으로 Mobile Safari뿐만 아니라 일부 브라우저에서 버그가 있습니다 .

해결책 1. 적절한 사용 font-weight

따라서 가장 좋은 해결책은 글꼴 두께를 Google Fonts가 제공하는 글꼴 두께로 변경하는 것입니다. 아래의 빠른 수정이 필요합니다.

h1, h2, h3, h4, h5, strong, b { 
    font-weight: 400; 
} 
/* or font-weight: normal */ 

해결 방법 2. 원하는 굵게 / 기울임 꼴 스타일을 제공하는 글꼴을 사용하십시오.

다른 해결책은 굵은 스타일 이 포함 된 웹 글꼴 아카이브에서 글꼴을 선택하는 것 입니다. Reenie Beanie와 매우 유사하고 "더 굵은"Google 글꼴의 대안은 예를 들어 Gochi Hand , Sunshiney 또는 Permanent Marker 입니다.

해결 방법 3. 다른 수단을 사용하여 가짜 가짜

가짜 굵은 스타일을 원한다면 얇은 텍스트 그림자 또는 텍스트 획을 사용해 볼 수 있습니다 .

---

'bolder'또는 'bold'태그를 사용하지 마십시오. 특정 가중치 웹 폰트를 사용하는 경우에는 필요하지 않습니다.

나는 같은 문제가 있었다. 글꼴 두께에 대한 언급을 제거하면 사라졌습니다.

---

이 CSS 규칙을 적용 해보십시오.

-webkit-font-smoothing: antialiased;

참조 URL : https://stackoverflow.com/questions/5069752/ios-4-2-webfont-ttf-s-bold-font-weight-rendering-bug