반응형
http에서 잘 나오던 폰트 어썸 글꼴이 https로 설정을 한 이후 크롬, 파이어폭스 등에서는 잘 표시되지만 ie11에서만 표시가 되지 않았다.
테스트를 위해서 로컬에 https 환경을 구성 [APACHE] 로컬에서 https 테스트 환경
사용한 버전
- Apache 2.4
- Tomcat 8.5.x
- fontawesome 4.4.0
원인은 IE11 버그라는데 SSL 환경에서 폰트에 Cache를 사용하지 않게 되면 정상적으로 표시를 못해 캐시를 사용하도록 설정을 하면 된다.
head의 Pragma 속성 no-cache 설정
Apache WEB 서버를 사용하고 있었기 때문에 httpd.conf 설정을 통하여 폰트 확장자에 한해서 캐시 설정을 변경
# 주석 해제
LoadModule headers_module modules/mod_headers.so
# 캐시 설정 추가
<LocationMatch "\.(eot|otf|woff|ttf)$">
Header set Access-Control-Allow-Origin "*"
Header set Cache-Control "max-age=3600"
Header set Pragma "none"
</LocationMatch>- Access-Control-Allow-Origin: 교차 출처 리소스 공유(CORS)를 허용하기 위한 head값으로 모든 도메인에서 접근 사용 가능
- Cache-Control: 해당 리소스의 캐시 설정
- Pragma: HTTP 1.1 버전의 Cache-Control이 생기기 전 HTTP 1.0에서 사용하던 유사 기능, 캐시 사용하지 않도록 설정하는 기능,
none로no-cache설정 해제
- 캐시 설정 전
- 캐시 설정 후
그 외 해결 방안
캐시 외에도 다른 방법을 설명한 것이 있었으나 적용을 해도 정상적으로 표시되지 않았다.
하지만 X-UA-Compatible는 이 경우가 아니더라도 가장 첫 번째로 오는 것이 좋다.
신뢰할 수 있는 사이트로 설정
IE11 -> 인터넷 옵션 -> 보안 -> 신뢰할 수 있는 사이트 -> 사이트
메뉴에서 해당 사이트를 신뢰할 수 있는 사이트로 등록하는 경우 정상적으로 표시
가장 먼저 "X-UA-Compatible" meta tag 설정
head 아래 처음 시작을 "X-UA-Compatible"으로 할 경우 폰트가 정상적으로 나타는 경우도 있다고 함
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>참고
- https://stackoverflow.com/questions/31291414/font-awesome-icon-is-not-appearing-in-ie-11-but-showing-in-other-browsers
- CORS : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
- Access-Control-Allow-Origin: https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
- Cache-Control: https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Cache-Control
- Pragma: https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Pragma
반응형
'FullStack > 10. WeB' 카테고리의 다른 글
| 폐쇄망에서 HTTPS 접속 시 IE 페이지 표시 안 되는 현상 (0) | 2021.11.23 |
|---|---|
| Apache Proxy 설정 (0) | 2021.03.12 |
| [APACHE] 로컬에서 https 테스트 환경 (0) | 2020.12.18 |
| [HTML] Iframe 사이즈에 따른 Frame 조절 (0) | 2020.11.16 |
| [WindFly] 한글 파라미터 처리 (0) | 2020.11.11 |