유니 코드 범위를 사용하여 숫자 만 제외

Question

사용자 정의 글꼴을 사용하고 @ font-face를 통해 불러옵니다. 텍스트는 괜찮은 것처럼 보이지만 숫자는 엉망으로 보입니다 (크롬 창에서만 버그를 잘 알고 있습니다.) 그렇습니다. 크롬에 svg 형식을 사용했는데 숫자는 해결했지만 텍스트는 엉망이었습니다. 난 단지 [a-z][A-Z]에 내 자신의 글꼴을 제한하기로 결정하고, this generator을 사용하면이있어 :

unicode-range: U+0041-U+005a, U+0061-U+007a; 

를 그리고 ... 작동하지 않을 것 같다. 글꼴을 사용하여 숫자가 계속 표시됩니다. \ 다른 솔루션을 사용할 올바른 범위는 어떻게 찾습니까? 미래의 글꼴을 제한하고 싶다면 예를 들어, 일반적인 해결책을 원합니다.

미리 감사드립니다.

p.s. 제가 주제를 다룰 때 - 같은 글꼴을 두 번로드 할 방법이 없다고 가정합니다. 숫자로는 .svg 파일을 사용하고 텍스트에는 .otf을 사용 하시겠습니까? 가능하다면 그것은 최고 일 것입니다.

Answer 1

마지막으로 "brute-force"방법을 사용했습니다. Font Squirrel's webfont generator을 사용하여 글꼴 파일을 다시 만들고 고급 옵션> 사용자 정의 하위 집합을 사용하여 I 은 글꼴에서을 완전히 제거했습니다.

끔찍한 해결책처럼 보이지만, 내가 찾을 수있는 최선의 방법입니다.

Answer 2

@font-face 규칙을 사용하여 다른 글꼴이 사용되는 특정 문자 범위를 제외하고 특정 글꼴에 글꼴 패밀리 이름 (특정 결정할 글꼴)이 매핑되도록 지정할 수 있습니다. 로컬 글꼴에도 효과적입니다. 다음과 같이 지원하는 브라우저에

<style> 
@font-face { 
    font-family: foo; 
    src: local("Times New Roman"); 
} 
@font-face { 
    font-family: foo; 
    src: local("Arial"); 
    unicode-range: U+0030-0039; 
} 
p { font-family: foo } 
</style> 
<p>hello 123</p> 

, "안녕하세요"굴림 타임즈 새로운 로마 (사용 가능한 경우)하지만 "123"(사용 가능한 경우)에 나타납니다; 범위 U+0030-0039은 일반적인 유럽 숫자 0-9입니다.

다운로드 가능한 글꼴에는 비슷한 기술을 사용할 수 있습니다.

나쁜 소식은 Firefox 나 IE 8 이전 버전에서는 unicode-range이 지원되지 않습니다. 위의 코드에서 IE 8은 Times New Roman을 사용하고 후자의 @font-face 규칙을 무시합니다. 현재 Firefox는 Arial을 사용하지만 unicode-range 제한이없는 것처럼 말입니다.