2014-10-06 2 views
0

웹 프로젝트 (http://www.google.com/fonts/specimen/Quicksand)에 "Quicksand"글꼴을 사용하고 있는데 문제가 있습니다. 해당 글꼴에 ² 문자가 없습니다. 다른 글꼴 (Quicksand 글꼴 글꼴 속성에서 작성된)에서 렌더링 될 것이라고 생각했지만 그렇지 않습니다. 필자가 ²를 쓸 때, 렌더링 된 유일한 것은 공백입니다.CSS Webfont가 문자 누락을 렌더링하지 않습니다.

다른 글꼴로 지원되지 않는 문자를 렌더링하는 방법이 있습니까?

font-family: "Quicksand", Helvetica, Arial, sans-serif; 
+0

스팬에있는 해당 문자를 감싸고 다른 글꼴 패밀리를 적용하십시오. –

답변

1

이 무덤 글꼴의 버그가 있습니다 :

여기에 사용되는 CSS의 유니 코드 코드 위치 U + 00B2, SUPERSCRIPT TWO, 그것은 빈 그래프가 있습니다. 396 단위 넓이이므로 폰트의 일반 SPACE (300 단위)보다 넓습니다. 비슷한 문제가있는 다른 문자는 U + 201A SINGLE LOW-9 QUOTATION MARK ","입니다.이 문자에는 230 자 너비의 빈 글자가 있습니다.

원칙적으로 @font-face 규칙에서 unicode-range을 사용하여 다른 글꼴에서 특정 문자를 가져 오도록 지정하면 버그를 피할 수 있습니다. 그러나 브라우저 지원은 여전히 ​​제한적입니다 (그리고 접근법은 글꼴 파일을 Google 서버에서 사용하는 대신 호스팅해야합니다).

또 다른 가능성은 글꼴을 편집하는 것입니다. 여기에는 글꼴 편집기와 저작권 보유자 (물론 글꼴 파일 호스팅)의 허가가 필요합니다.

세 번째 옵션은 클래스가있는 span 요소에 "²"의 각 항목을 래핑하고 적절하게 font-family을 설정하는 것입니다. 이것은 좋은 글꼴에서 피해야하는 다른 글꼴의 글리프를 혼합한다는 것을 의미합니다.

마지막으로 다른 글꼴을 사용하는 것이 좋습니다. Quicksand 글꼴로 렌더링 문제에 관해서 몇 가지 질문이 있습니다.

+0

오랫동안 답변 해 주셔서 감사합니다. 마지막으로 내 유일한 옵션은 input/select/textarea 요소의 글꼴을 변경하는 것이 었습니다. – Ecorce

관련 문제