익스플로러11 웹폰트, 화면 깜빡임(FOUC) 문제해결
*어디에 올려야 할지 몰라서
팁자료실에 올립니다.
익스플로러11 에서 웹폰트가 들어있는 사이트를 로딩하면
로딩중에 원래 폰트가 웹폰트로 변하는 현상이 보인다.
FOUC 라고 하는데 아쉽게도 국내 사이트의 해결책은 제대로 안된다.
구글 검색(ie fouc) 끝에 스택 오버플로우에서 정답을 찾았다.
Stack Overflow
https://stackoverflow.com/questions/33587623/prevent-fouc-in-firefox-and-ie
1. 일단 <head> 태그 안에 웹폰트 CSS 2개를 넣었다.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumgothic.css">
style.css 에도 폰트를 지정한다.
<link rel="stylesheet" href="css/style.css">
body {
font-family: "Nanum Gothic", sans-serif;
font-size: 14px;
}
p {
font-family: "Nanum Gothic", sans-serif;
}
#sidebar .sidebar-header h1 {
font-family: 'Open Sans', sans-serif;
}
기본 설정은 끝났다.
2. html 요소에 id를 지정한다.
<html lang="ko" id="no-fouc">
3. head 안에 아래 CSS를 추가한다.
<style type="text/css">
#no-fouc { opacity: 0; }
</style>
4. 제이쿼리와 관련 코드를 추가한다.
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#no-fouc").delay(250).animate({"opacity": "1"}, 250);
});
</script>
익스플로러에서 다시 페이지를 새로고침하면
폰트가 변하지 않고 그대로 로딩된다.
댓글 7개