재료 아이콘

Question

문제

내가 Google Material icons와 홀수, 정말 재현하지 않는 문제로 실행 해요 일부 고객을 위해 렌더링되지 않는 글꼴입니다. 그러나 사용자의 작은 부분은 렌더링하지 않는 글꼴에 문제가 있습니다. 문제는 글꼴 리소스가 전혀로드되지 않는다고 가정합니다. 문제가 존재하며 모든 OS, 브라우저 및 기기에 널리 퍼져 있음을 확인했습니다.

export default function() { 
    let promise = new $.Deferred(); 
    // Font we know everyone has, in our case it just needs to be variable width 
    let fallbackFontFamily = 'sans-serif'; 
    // The font we're testing 
    let fontFamily = 'Material Icons'; 
    // Add a mix of characters to the DOM so we can measure them. The character 
    // choice here is mostly trial and error, trying to differentiate widths 
    // between the two fonts 
    let $tester = $('<span>@|iLnQW&#xE838;</span>') 
     .css('position', 'absolute') 
     .css('visibility', 'hidden') 
     .css('fontSize', '300px'); 

    $('body').append($tester); 

    function test(repeat) { 
    if (repeat == null) { 
     repeat = 0; 
    } 
    // measure the element as if the font has not loaded 
    let fallbackWidth = $tester.css('fontFamily', fallbackFontFamily).outerWidth(); 
    // measure the element as if the font *has* loaded 
    let actualWidth = $tester.css('fontFamily', `${fontFamily}, ${fallbackFontFamily}`).outerWidth(); 

    // if the font has successfully loaded, the widths should not be the same! 
    if (fallbackWidth !== actualWidth) { 
     promise.resolve(); 
    } else if (repeat === 0) { 
     promise.reject(new Error(`font, ${fontFamily}, failed to load`)); 
    } else { 
     // repeat until finished 
     setTimeout(() => test(--repeat), 100); 
    } 
    } 

    // of course, we clean up after ourselves 
    promise.always(() => $tester.remove()); 

    test(10); // repeat 10x 
    return promise; 
} 

이 다시 우리에게 각 오류를보고, 모든 트래픽의 약 3 %가 영향을받는 것 같습니다 :이 확인 렌더링 테스트를 사용했다. 나는 의도적으로 네트워크를 망쳐 놓은 경우를 제외하고는이 문제를 스스로 재현하지 못했습니다. 간단한 새로 고침으로 인해 문제가 해결되어 리소스로드 문제는 아니지만 브라우저 나 운영 체제의 일부가 아닌 네트워크에서 문제가 될 수 있습니다.

디버깅 내가 문제를 해결하기 위해 몇 가지 조치를 취할 시작했습니다 지금 측정되는 문제를

,이 중 어느 것도 어떤 결과를 생산,하지만 알고 아마 유용했습니다

• 원래 Google에서 호스팅 한 스타일 시트와 글꼴은 as instructed here입니다.
• 네트워크 요청을 제거하기 위해 자체 호스팅 스타일 시트로 전환했습니다. 나는 원본에서 복사하고 붙여 넣기 만했다.
• 그런 다음 글꼴을 직접 호스팅하기 시작하여 그에 따라 @font-face을 업데이트했습니다. Google의 호스팅 버전을 리던던시를위한 대체 시스템으로 남겨 두었습니다.
마지막으로 나는 고객이 폰트의 일부 이상한 깨진 버전이있는 경우 @font-face에서 글꼴의 로컬 버전을 제거 (이 시점에서 난 그냥 아무것도 시도하고,이 사실 아무것도 할 것인지 단서 없음)

스타일 시트의 최종 상태 : 나는 자기 글꼴이 일반적인 경우에 제대로 작동합니까 호스팅 있음을 확인했다

@font-face { 
    font-family: 'Material Icons'; 
    font-style: normal; 
    font-weight: 400; 
    src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */ 
    src: url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), 
     url(../fonts/MaterialIcons-Regular.woff) format('woff'), 
     url(../fonts/MaterialIcons-Regular.ttf) format('truetype'), 
     url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2'), 
     url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5RV6cRhDpPC5P4GCEJpqGoc.woff) format('woff'), 
     url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5StnKWgpfO2iSkLzTz-AABg.ttf) format('truetype'); 
} 

.material-icons { 
    font-family: 'Material Icons'; 
    font-weight: normal; 
    font-style: normal; 
    font-size: 24px; 
    line-height: 1; 
    letter-spacing: normal; 
    text-transform: none; 
    display: inline-block; 
    white-space: nowrap; 
    word-wrap: normal; 
    direction: ltr; 
    text-rendering: optimizeLegibility; 
    -webkit-font-smoothing: antialiased; 
} 

. 나는이 테스트가 내 마지막에 오류의 가능성이 의 대부분을 제거했다고 생각합니다. 이제 나는 무슨 일이 일어나고 있는지 전혀 모른다. 일부 브라우저는 글꼴을 전혀로드하지 않고 있습니까? 이런 종류의 문제를 측정하거나 모니터링해야하는 다른 방법이 있습니까? 그리고 가장 중요한 것은 어떻게 해결할 수 있을까요?

Answer 1

이것은 네트워크 연결에서 간단한 결함으로 인한 것일 수 있습니다. 브라우저가 FOUT에 걸림돌이되거나 더 나쁜 경우 FOIT는 웹 개발자가 고려해야 할 실질적인 문제입니다.

더 나은 모니터링을 위해 Font Face Observer을 사용하여 프로덕션 환경에서 글꼴을로드하는 것이 좋습니다 (어쨌든 좋은 생각입니다). 글꼴로드가 실패 할 때 일부 디버깅/로깅을 수행하십시오.