매우 가까운 환경에서 당사의 주요 웹 사이트에 문제가 있습니다.글꼴 굉장 네비게이션 사이에 사각형으로 표시되는 아이콘 [Chrome Only]
사용자가 링크를 클릭하면 Chrome에서 뒤로 버튼을 매우 빠르게 클릭하면 글꼴 썸네일 아이콘이 제곱으로 표시됩니다.
글꼴 Awesome의 로컬 저장된 인스턴스를 사용하고 있으며이 문제는 5 회마다 한 번만 발생하지만이 문제를 해결하고 싶습니다.
나는 그냥 FUOC 생각합니다. 귀하의 경우에는 글꼴이 지연되어로드됩니다. 어떤 이유로 그들은 캐시되지 않습니다 (어쩌면 개발자 도구가 열렸습니까?).
simulating 크롬에서 느린 인터넷 연결로이 오류를 재현 해 볼 수 있습니다. 만약 당신이 아마 당신은 또한이 사각형을 볼 것입니다.
아마도 프리 로더 화면을 구현하고 모든 애셋이로드 된 페이지 콘텐츠 만 표시해야 할 것입니다. 전체 페이지를 덮을 div를 작성한 다음 문서가 준비되면 제거하십시오.
여기에 example입니다.
WOFF가 TTF 및 SVG 앞에 놓 이도록 @ font-face의 글꼴 형식을 재정렬하십시오. SVG 글꼴은 글꼴을 지원하는 브라우저에서보다 잘 렌더링됩니다. 그러므로 기본값으로 만드십시오.
.ttf, woff, woff2와 같은 모든 글꼴 파일을 넣고 SVG를 넣습니다. 확인을 통해 글꼴 패밀리 이름도 지정해야합니다. 또한 글꼴 호출 경로를 확인하십시오. 도움이 될 수 있습니다 :)
글쎄, 올바른 방법은 SVG 아이콘으로 아이콘 글꼴을 대체하는 것입니다. 하지만 사이트의 크기에 따라 더 큰 작업이 될 수도 있습니다 ... – Boldewyn
.woff 형식 글꼴이없는 것 같습니다. 확인하십시오 ... => fontawesome/fonts/fontawesome-webfont.woff – Nehemiah