이 '느린 네트워크가 감지되었습니다…'로그가 Chrome에 표시되는 이유는 무엇인가요?

이것이 info logChrome Dev (버전 55.0.2883.18 dev)에 나타나기 시작한 이유를 알 수 없습니다.

네트워크 속도가 느립니다. : 대체 글꼴을로드하는 동안 사용되는 HTTP : //font-path.extension를 `

font-face로컬 페이지 및 Chrome 확장 프로그램에서도을 사용하는 모든 웹 사이트에 표시됩니다 .

즉, 네트워크 속도가 느리고 Chrome에서 웹 글꼴 ( @font-face규칙이 로드 됨 )을 로컬 폴백으로 바꿉니다 .

기본적으로 웹 글꼴로 렌더링 된 텍스트는 글꼴을 다운로드 할 때까지 표시되지 않습니다 ( “보이지 않는 텍스트의 플래시” ). 이 변경으로 인해 느린 네트워크의 사용자는 몇 초 동안 빈 페이지를 보지 않고 콘텐츠가로드 될 때 바로 읽기를 시작할 수 있습니다.

• 관련 크롬 문제 : https://bugs.chromium.org/p/chromium/issues/detail?id=578029 . (3G 연결에 대해이 동작을 가능하게하는 변경 사항은 9 월에 시작되었습니다. 이것이 메시지를받는 이유 여야합니다.)
• 관련 소스 코드 : https://chromium.googlesource.com/chromium/src/third_party/+/master/WebKit/Source/core/css/RemoteFontFaceSource.cpp#74

61.0.3163.100MacOs Sierra 에서 크롬 빌드 에 대해 localhost서버 와 동일한 문제에 직면했습니다 . 네트워크 속도 구성을 3G fast / 3G slow로 변경 한 다음 다시 온라인으로 되돌릴 때 Chrome에서이 메시지를 기록하기 시작했습니다.

수정 : 오프라인 모드를 선택하고 다시 온라인 모드를 선택하려고하면 로깅 문제가 사라졌습니다. (이 수정 사항은 일부 장치 또는 버전에서 작동하지 않을 수 있습니다)

2018 년 1 월 30 일 업데이트

Google 크롬을 Version으로 업데이트했는데이 64.0.3282.119 (Official Build) (64-bit)버그가 수정 된 것 같습니다.

편집 : 최신 버전 63.0 이상에서는 작동하지 않습니다

위의 의견 중 하나의 도움을 사용하여 비활성화 할 수있었습니다.

chrome://flags/#enable-webfonts-intervention-v2

트릭은 바로 아래에있는 " WebFonts 로딩을위한 사용자 에이전트 개입 트리거 "옵션 도 비활성화하는 것입니다.

필자의 경우 Google 크롬 용 AdBlock Plus 확장 프로그램이었습니다. 전원을 끄고 완벽하게 작동했습니다.

이 확장 프로그램의 CSS에 액세스 할 수 있으면 font-display:block;글꼴 글꼴 정의를 추가하거나이 확장 프로그램 개발자에게 피드백을 보내십시오.

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

콘솔 설정을 설정하여 이것을 숨 깁니다.

Console settings -> User messages only

chrome : // flags / # enable-webfonts-intervention-v2로 이동하여 사용 중지로 설정

Chrome의 최신 '네트워크 속도'API에 버그가 있기 때문입니다. 다음 버전에서 수정되기를 바랍니다.

네트워크 조절 기능을 사용할 수 없지만 오늘 75mb / s 비즈니스 연결에서이 오류가 발생하기 시작했습니다.

Chrome 60.0.3112.90 (공식 빌드) (64 비트) 빌드에서이 문제를 해결하려면 DevTools를 연 다음 DevTools 설정으로 이동 한 다음 'Log XMLHttpRequests', '사용자 메시지 만'및 '네트워크 메시지 숨기기'를 선택했습니다.

이를 비활성화하는 가장 쉬운 방법은 chrome dev 도구에서 경고를 확인 해제하는 것입니다.

도움이 되었기를 바랍니다.

방금 필터 정규식을 작동 시켰습니다. /^((?!Fallback\sfont).)*$/ .

콘솔 바로 위의 필터 필드에 추가하면 포함 된 모든 메시지가 숨겨집니다. Fallback font 집니다.

원하는 경우 더 구체적으로 만들 수 있습니다.

Google 글꼴을 사용하는 앱을 개발 중이며 사용자에게 이러한 경고가 표시되지 않도록하려면 가능한 해결책 ( 여기에 자세히 설명되어 있음 )은 글꼴을 로컬로로드하는 것이 었습니다.

인터넷이 느리거나 인터넷에 액세스 할 수없는 응용 프로그램에이 솔루션을 사용했지만 여전히 페이지를 제공합니다. 이는 앱에서 Google 글꼴을 사용하고 이러한 글꼴에 대한 업데이트가 중요하지 않다고 가정합니다. 또한 ttf 글꼴을 사용하는 것이 응용 프로그램에 적합하다고 가정합니다. WC3 TTF 글꼴 브라우저 지원 .

글꼴을 로컬에서 제공하는 방법은 다음과 같습니다.

https://fonts.google.com/으로 이동 하여 글꼴을 검색하십시오.

서체 추가

그들을 다운로드

사이트 루트에 배치

@font 파일에 추가하십시오

fontawesome의 글꼴과 동일한 오류가 발생했습니다. 그런 다음 가장 마지막 fontawesome의 글꼴을 다운로드하고 이전 글꼴로 바꿉니다. 그리고 오류는 사라졌습니다.

1. 아니요, 네트워크 속도가 느려진 것은 아닙니다.
2. 아니요, 이것은 잘못된 경고 일뿐입니다.

교체 링크 https://fonts.googleapis.com/icon?family=Material+Icons 후에 각도 웹 응용 프로그램 에서이 문제가 있습니다. (... ... 재료 아이콘을 설치 NPM) 통합 버전으로 index.html을에 있습니다. 이것은 작동하지만 때로는 웹 응용 프로그램에서 해당 경고를 표시합니다.

경고가 표시되면 아이콘이 약 1 초 동안 렌더링되지 않으므로 사용자에게 잘못 렌더링 된 아이콘이 표시됩니다.

아직 해결책이 없습니다.

Font의 stylesheet.css로 이동하여 font-display를 추가하십시오 : block; 모든 @ font-face {}에서

이 Stackoverflow Answer가 도움이되었습니다 ..

아래는 답변 요약입니다

이 확장의 CSS에 액세스 할 수 있으면 font-display : block; 서체 정의 또는이 확장 프로그램 개발자에게 피드백 보내기 :)

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

'콘솔 설정'을 클릭 한 다음 '메시지 만 사용'확인란을 선택하면 해당 메시지가 다시 표시되지 않습니다.

도움말-> 정보 수정을 통해 최신 버전의 Chrome (63.0.3239.84)으로 업데이트 중입니다.

(실제로 개발자 도구의 네트워크 탭에서 오프라인으로 전환하고 온라인으로 다시 전환하여 마지막 오류를 해결해야했습니다.)

DuckDuckGo Privacy Essentials 플러그인을 비활성화하자마자 사라졌습니다. 내가 제공하는 글꼴이 localhost에서 왔기 때문에 약간 성가 시므로 느린 네트워크 연결과 관련이 없습니다.

마우스 오른쪽 버튼으로 Chrome Dev를 클릭하십시오. 그런 다음 필터를 선택하십시오. 메시지 소스를 선택하십시오.