2013-04-05 2 views
3

이것은 매우 초조 한 버그입니다!간헐적으로 글꼴로드에 실패 했습니까?

Font Awesome (로컬로 호스팅 됨)과 몇 가지 다른 글꼴을 사용하고 있으며 404ing이 아니고 때때로 개발자 도구의 네트워크 탭에 나타나지 않고 페이지에 렌더링되지 않는 등의 이유로로드가 일시적으로 실패합니다 .

처음으로 페이지가로드 될 때 자주 발생하는 것처럼 보입니다 .- 새로 고침을하면 글꼴이로드되고 렌더링됩니다. 그러나 브라우저 캐시를 지우더라도 문제가 확실하게 재현되지는 않습니다.

글꼴의 80 %가 렌더링되기 때문에 경로가 잘 맞습니다. 이것은 간헐적 인 문제입니다. OSX에서 Chrome v26을 사용하고 있습니다. 사실에 의해 입증, 경로가 (올바른

@font-face { 
font-family: 'open_sanslight'; 
src: url('opensans-light-webfont.eot'); 
src: url('opensans-light-webfont.eot?#iefix') format('embedded-opentype'), 
    url('opensans-light-webfont.woff') format('woff'), 
    url('opensans-light-webfont.ttf') format('truetype'), 
    url('opensans-light-webfont.svg#open_sanslight') format('svg'); 
font-weight: normal; 
font-style: normal; 

}

한 번 더 :

<head> 
... 
<link rel="stylesheet" type="text/css" href="${context}/resources/font/opensans.css" /> 
<link rel="stylesheet" type="text/css" href="${context}/resources/css/font-awesome.min.css" /> 
... 

그리고 CSS 파일을 다음과 같이 :

내 CSS는 다음과 같습니다 글꼴이 정확하게 시간의 80 %를 렌더링합니다).

어떤 일이 벌어 질 수 있습니까?

+0

네트워크 탭 @ 파이어 폭스를 확인 하시겠습니까? 는 똑같은? –

+0

파이어 폭스에서이 문제를 발견하지 못했습니다. 파이어 폭스에서 문제가 발생하지 않았습니다. 파이어 폭스에서 캐시를 사용할 수 없으므로 문제가 발생할 수 있습니다. 내가 말한 것처럼 : 당황한. – Richard

+0

다음 사진을주세요 : http://stackoverflow.com/questions/4015816/why-is-font-face-throwing-a-404-error-on-woff-files – cdwyer

답변

1

관찰 된 동작에 기여하는 많은 문제가있을 수 있습니다. 문제에 대한 귀하의 설명을 토대로, 무슨 일이 일어나는지 명확하지 않습니다.

WebPagetest을 사용하여 문제를 재현하는 것이 좋습니다. 도료의 타이밍을 볼 수 있도록 비디오를 녹화하는 옵션을 선택하십시오. WPT는 첫 번째보기 경험을 정확하게 시뮬레이트 할 수 있으므로 시작하는 것이 좋습니다.

3

여기에서 같은 문제가 발생합니다. Chrome에만 영향을 미칩니다. 단지 우리의 사이트가 아닌 일부에 영향을 미칠 것으로 보인다 불구하고, 우리는이 순간에 브라우저 버그 가정하고

https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=font&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=-modified&id=229071

: 크롬에이 버그는 동일한 문제 (또는 매우 유사한)를 설명하기 위해 나타납니다 다른 사람들은 아마 그것보다 더 많이있을 것입니다. 부트 스트랩 CDN이 아니라 우리 자신의 서버에서 글꼴 (FontAwesome를)로드

  • :

    는 여기에 몇 가지 우리가 성공하지하려고 일을합니다. 간헐적으로 실패합니다.

  • 글꼴 파일을 base64 인코딩 된 문자열로 인라인합니다. 간헐적으로 실패합니다.
  • FontAwesome에서 SymbolSet으로 전환합니다. 간헐적으로 실패합니다.
관련 문제