Segoe UI Semilight가 CSS에서 작동하지 않습니다.

Question

웹 페이지에서 Segoe UI Light, Segoe UI Semilight 및 Segoe UI를 사용하려고합니다. IE에서 훌륭하게 렌더링되지만 Chrome은 Light와 Semilight를 구분하지 않는 것 같습니다.

Microsoft에서 제안한대로 this StackOverflow answer에 제안 된 CSS를 사용하고 있습니다. http://jsfiddle.net/nHXDA/

여기 결과이다 :

/* 
Explicitly define a Segoe UI font-family so that we can assign Segoe UI 
Semilight to an appropriate font-weight. 
*/ 
@font-face { 
    font-family: "Segoe UI"; 
    font-weight: 200; 
    src: local("Segoe UI Light"); 
} 
@font-face { 
    font-family: "Segoe UI"; 
    font-weight: 300; 
    src: local("Segoe UI Semilight"); 
} 
@font-face { 
    font-family: "Segoe UI"; 
    font-weight: 400; 
    src: local("Segoe UI"); 
} 
@font-face { 
    font-family: "Segoe UI"; 
    font-weight: 600; 
    src: local("Segoe UI Semibold"); 
} 
@font-face { 
    font-family: "Segoe UI"; 
    font-weight: 700; 
    src: local("Segoe UI Bold"); 
} 
@font-face { 
    font-family: "Segoe UI"; 
    font-style: italic; 
    font-weight: 400; 
    src: local("Segoe UI Italic"); 
} 
@font-face { 
    font-family: "Segoe UI"; 
    font-style: italic; 
    font-weight: 700; 
    src: local("Segoe UI Bold Italic"); 
} 

다음 jsfiddle 가볍고 Semilight 포함 Segoe UI 다양한 폰트 가중치를 나타낸다.

크롬 :

IE :

이 문제를 해결하는 방법에 어떤 아이디어?

Answer 1

로 글꼴이 설치되어 있지 않은 다른 모든 장치에서 장치가 제대로 무시되는 동안 일치하는 대체 장치가 있는지 확인해야합니다.

둘째로 글꼴 정의가 잘못되어 브라우저 간 작동하지 않는다는 것입니다. Internet Explorer는 src: local("Segoe UI Semibold");으로 지정된 올바른 글꼴 파일을 직접 사용할 수 있지만 다른 모든 브라우저는 글꼴 모음을 참조해야합니다. src: local("Segoe UI");.

은 볼드체의 경우이 같은 글꼴 정의를 지정해야합니다 : 당신이 당신의 글꼴 정의를 수정하면

@font-face { 
    font-family: "Segoe UI"; 
    font-weight: 300; 
    src: local("Segoe UI Semilight"), local("Segoe UI"); 
} 

는 다음 스크린 샷 쇼처럼 보일 것입니다. 이 스크린 샷에서 폰트 패밀리가 폰트 패밀리 이름 대신 전체 이름으로 지정되면 폰트는 Times New Roman으로 대체된다는 것을 알 수 있습니다. 이것은 브라우저가 IE에 대해 독점적 인 글꼴 이름을 해석 할 수 없기 때문에 발생합니다.

로컬 글꼴을 사용하고 있기 때문에 확실하지 않은 경우 사용 가능한 웹 글꼴이 수정 된 경우 추가 글꼴을 조정해야합니다. 웹 폰트에 웹용으로 특별한 힌트가있는 경우가있을 수 있습니다.

Answer 2

다른 브라우저에는 서체를 렌더링하는 여러 가지 방법이 있습니다. 크롬은, 가난 시대의 최고의 글꼴을 렌더링하는 가장 큰 원인이되고, 나는이 문제에 대한 공정한 몇 가지 기사를 우연히 발견했다 (최근의 일부.)

https://code.google.com/p/chromium/issues/detail?id=408587

당신이 구글 카나리아 (야간를 설치하는 경우 Google 크롬의 "베타"빌드)를 테스트하고 거기에서 테스트하면 어떤 결과가 나타 납니까? 버전 별 버그 일 수 있으므로 확인 만하면됩니다. 최근에 Chrome을 업데이트 한 것으로 보이는 기사 몇 개를 읽었을 때 더 이상 Segoe UI를 font-weight: 300/200에 올바르게 렌더링하지 않습니다.

로컬 글꼴 사용에 지쳐서 Windows PC를 사용하지 않는 사람은 Mac/Linux/Chrome/Firefox OS와 같은 글꼴을 볼 수 없습니다.

이는 webfont 같은 지역 다운로드 할 수있는 기계/사용에 무료로 대안을의 (로컬 웹 사이트를 사용하려는 경우에도 만 해당) 글꼴은 Windows에 표시 될 것이라는 사실 옆에 Google's Open Sans.