2014-03-25 1 views
2

IE를 제외한 모든 브라우저에서 잘 작동하는 Google 글꼴이있는 (개발 중이며 아직 게시되지 않은) 사이트가 있습니다 ... 내 경우에는 , IE9,하지만 다른 IE는 또한 영향을받습니다 의심. 저는 IE < 9와의 하위 호환에 너무 관심이 없으므로 "IE9가 작동하지 않습니다!"라고 남겨 두자.IE9에서 작동하지 않는 "bulletproof"@ font-face (Apache의 WordPress 사이트)

원래 Google에서 글꼴을 호스팅하는 것을 말하고 있었는데 문제가 있는지 궁금해하고 FontSquirrel을 사용하여 웹킷을 만들고 다운로드했습니다. 좋아, 여전히 모든 사람들을 위해 일하고있다. BUT IE. 나는 CSS 아웃룩, 특히 Paul Irish의 원래의 방탄 문법 (http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)과 업데이트 된 버전을 모두 doublechecked : http://css-tricks.com/snippets/css/using-font-face/.

거푸집 없음.

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 24, 2014 */ 


@font-face { 
font-family: 'Open Sans'; 
src: url('opensans-regular-webfont.eot'); /* IE9 Compat Modes */ 
src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
    url('http://themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'),/* Modern Browsers */ 
    url('opensans-regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('opensans-regular-webfont.svg#open_sansregular') format('svg'); /* Legacy iOS */ 
font-weight: 400; 
font-style: normal; 
} 


@font-face { 
font-family: 'Ubuntu'; 
src: url('ubuntu-bolditalic-webfont.eot'); /* IE9 Compat Modes */ 
src: url('ubuntu-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */ 
    url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/OMD20Sg9RTs7sUORCEN-7dIh4imgI8P11RFo6YPCPC0.woff') format('woff'),/* Modern Browsers */ 
    url('ubuntu-bolditalic-webfont.ttf') format('truetype'),/* Safari, Android, iOS */ 
    url('ubuntu-bolditalic-webfont.svg#ubuntubold_italic') format('svg'); /* Legacy iOS */ 
font-weight: 700; 
font-style: italic; 

} 


@font-face { 
font-family: 'Ubuntu'; 
src: url('ubuntu-italic-webfont.eot'); /* IE9 Compat Modes */ 
src: url('ubuntu-italic-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */ 
    url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/djUe04BCq9zQJd4o6n2eG_esZW2xOQ-xsNqO47m55DA.woff') format('woff'),/* Modern Browsers */ 
    url('ubuntu-italic-webfont.ttf') format('truetype'),/* Safari, Android, iOS */ 
    url('ubuntu-italic-webfont.svg#ubuntuitalic') format('svg'); /* Legacy iOS */ 
font-weight: 400; 
font-style: italic; 

} 


@font-face { 
font-family: 'Ubuntu'; 
src: url('ubuntu-bold-webfont.eot'); /* IE9 Compat Modes */ 
src: url('ubuntu-bold-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */ 
    url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/nsLtvfQoT-rVwGTHHnkeJj8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'),/* Modern Browsers */ 
    url('ubuntu-bold-webfont.ttf') format('truetype'),/* Safari, Android, iOS */ 
    url('ubuntu-bold-webfont.svg#ubuntubold') format('svg'); /* Legacy iOS */ 
font-weight: 700; 
font-style: normal; 

} 


@font-face { 
font-family: 'Ubuntu'; 
src: url('ubuntu-medium-webfont.eot'); /* IE9 Compat Modes */ 
src: url('ubuntu-medium-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */ 
    url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/gMhvhm-nVj1086DvGgmzBz8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'),/* Modern Browsers */ 
    url('ubuntu-medium-webfont.ttf') format('truetype'),/* Safari, Android, iOS */ 
    url('ubuntu-medium-webfont.svg#ubuntumedium') format('svg'); /* Legacy iOS */ 
font-weight: 500; 
font-style: normal; 

} 


@font-face { 
font-family: 'Ubuntu'; 
src: url('ubuntu-mediumitalic-webfont.eot');/* IE9 Compat Modes */ 
src: url('ubuntu-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */ 
    url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/ohKfORL_YnhBMzkCPoIqwtIh4imgI8P11RFo6YPCPC0.woff') format('woff'),/* Modern Browsers */ 
    url('ubuntu-mediumitalic-webfont.ttf') format('truetype'),/* Safari, Android, iOS */ 
    url('ubuntu-mediumitalic-webfont.svg#ubuntumedium_italic') format('svg'); /* Legacy iOS */ 
font-weight: 500; 
font-style: italic; 

    } 



@font-face { 
font-family: 'Ubuntu'; 
src: url('ubuntu-regular-webfont.eot');/* IE9 Compat Modes */ 
src: url('ubuntu-regular-webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */ 
    url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/hHs22WBTTzMhSqc5uBBDKg.woff') format('woff'),/* Modern Browsers */ 
    url('ubuntu-regular-webfont.ttf') format('truetype'),/* Safari, Android, iOS */ 
    url('ubuntu-regular-webfont.svg#ubunturegular') format('svg'); /* Legacy iOS */ 
font-weight: 400; 
font-style: normal; 

} 

내가 F12 개발자 도구를 사용하여 콘솔을 확인 :

지금까지 여기에 모두 있지만 IE 작동 내 CSS를합니다. 나다. CSS가있는 스타일 시트가로드되지만 해당 글꼴이로드되지 않는 것을 볼 수 있습니다.

아하! MIME 형식 문제입니까? 나는 또한 장애인 니스 캐시

# ---------------------------------------------------------------------- 
# Webfont access 
# ---------------------------------------------------------------------- 

# allow access from all domains for webfonts 
# alternatively you could only whitelist 
# your subdomains like "sub.domain.com" 

<FilesMatch "\.(ttf|otf|eot|woff|font.css)$"> 
    <IfModule mod_headers.c> 
    Header set Access-Control-Allow-Origin "*" 
    </IfModule> 
</FilesMatch> 

# webfont mime types 
AddType application/vnd.ms-fontobject eot 
AddType font/truetype     ttf 
AddType font/opentype     otf 
AddType application/x-font-woff    woff 

# webfonts and svg: 
<IfModule mod_deflate.c> 
    <FilesMatch "\.(ttf|otf|eot|svg)$" > 
    SetOutputFilter DEFLATE 
    </FilesMatch> 
</IfModule> 

음 때문에 : 글쎄, 나는 htaccess로 파일에 부엌 싱크대를 추가? 변수가 하나 더 적습니다. 재시작 된 Apache, natch. 그것이 중복되지 않았는지 확인하기 위해 내 doctype을 확인했습니다. 아니, 그렇지 않았습니다. 나는 경우에 대비해 IE 가장자리 메타 태그도 추가했습니다. 아, 네, html5shiv를 사용합니다.

누구나 비슷한 수수께끼가 있습니까? 다음 단계 제안 사항?

감사합니다, 기쁨

+1

내 임시 대답은 각각 (예를 들어, 1 인트라넷 영역) 위에 나열되어 있습니다. 정책과 달리 문제가 없습니다. 기쁨 – Joy

답변

1

나는 같은 문제가 있고, 나는 그것이 IE 보안 영역 설정 것을 확인했다. 일부 기업에는 특정 IE 보안 영역에 대한 글꼴 다운로드를 비활성화하는 그룹 정책이 있습니다.

4 개 전형적인 영역은 다음과 같습니다

  1. 인트라넷 영역 - 로컬 네트워크의 사이트.
  2. 신뢰할 수있는 사이트 영역 - 신뢰할 수있는 사이트에 추가 된 사이트.
  3. 인터넷 영역 - 인터넷에있는 사이트입니다.
  4. 제한된 사이트 영역 - 제한된 사이트에 특별히 추가 된 사이트입니다.

페이지가있는 영역을 IE9에서 확인하려면 페이지를 마우스 오른쪽 단추로 클릭 한 다음 속성을 선택하십시오. "구역"정보가있는 행이 표시되어야합니다.

용액 :

  1. 이 기업에 IE의 보안 영역을 읽거나 브라우저 설정을 관리하는 그룹에 문의하십시오.
    1. 글꼴 다운로드를 허용하는 사이트 인 경우 인트라넷 또는 신뢰할 수있는 영역에 사이트를 추가하라는 요청을 제출하십시오.
    2. 일부 정책은 인트라넷 영역에 특정 도메인 명명 규칙을 사용하기 만하면됩니다.
  2. 상자의 IE 설정을 수동으로 변경하여 개발하고 테스트 할 수있게하십시오.
    1. 액세스 할 수있는 경우 IE> 인터넷 옵션> 보안 탭> 글꼴 다운로드를 허용하는 영역에 특정 사이트를 추가하십시오.
    2. 보안 탭이 차단 된 경우 임시 관리 액세스 권한을 받고 "gpedit.msc"를 연 다음 컴퓨터 구성> 관리 템플릿> Windows 구성 요소> Internet Explorer> 인터넷 제어판> 보안 페이지> "사이트를 두 번 클릭하십시오 영역 할당 목록 "> 활성화하고"값 이름 "열에 도메인 이름을 추가하고"값 "열에 보안 영역 번호를 추가하십시오. 내 큰 공포 , 우리 기업의 IE 보안 설정의 정책은 모든 글꼴 다운로드를 비활성화하는 것입니다 : 존 번호는
관련 문제