라이믹스 CSS 압축 기능 사용시 폰트 적용이 이상해지는 문제
| CMS/프레임워크 | Rhymix 1.9 |
|---|---|
| 개발 언어 | PHP 7.2 |
테스트로 css,js 모든 파일 압축 기능을 사용해 보았다가
레이아웃의 css 폰트 적용 부분이 이상하게 적용되는 것을 확인했습니다.
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');
@import url('//fonts.googleapis.com/css?family=Lato:300,400');
body {font-family: 'NanumGothic', 'Nanum Gothic', sans-serif; font-size: 13px;}
이런식으로 css 처음에 작성되어 있습니다.
@import url(https://fonts.googleapis.com/css?family=Nanum+Gothic);@import url(//fonts.googleapis.com/css?family=Lato:300,400);@charset "utf-8"body{font-family:'NanumGothic','Nanum Gothic',sans-serif;font-size:13px}input,button,textarea,table{font-family:'NanumGothic','Nanum Gothic',sans-serif}
이렇게 압축이 되어서 변환이 되었습니다.
웹폰트 나눔고딕이 무력화 되고 sans-serif 가 적용되는 것으로 보아 웹폰트가 불러오지 못하는 듯 하네요.
개발자도구로 보니 레이아웃 CSS의 폰트를 참조하지 못하고
.rhymix.less.min.css?20201030125250 의 파일의 폰트 설정을 참조해서 폰트가 잘못 나오고 있네요.
댓글 6
이친구 문제가 아닐까 싶습니다.
각 CSS 파일에서 해당 코드를 삭제해 주시면 될 것 같아요.
지금 minified 된 파일을 보면
@charset "utf-8"body{font-family~~ 라고 나오는데요.
이러면 브라우저에서는 둘 중 하나로 해석하겠군요..
---
@charset "utf-8"body;
??? { font-family: ~~; }
-> 언어셋을 "utf-8"body 로 설정하고, 뭔진 모르겠지만 아무튼 무언가의 폰트를 ~~ 로 설정할 것.
---
@charset ???;
"utf-8"body { font-family: ~~; }
-> 언어셋을 나는 잘 모르는 무언가로 설정하고, "utf-8"body 라는 요소의 폰트를 ~~ 로 설정할 것.
---
둘 중 무엇이 되든, 둘 다 말이 되지 않는 코드지요.
라이믹스에서 @charset "utf-8" 부분을 일괄적으로 처리해 주어도 될거라 생각하는데,
일단 지금 곧바로 사용하시려면 해당 부분을 삭제하시면 될 거 같아요.
압축했을때 용량이 오히려 크게 증가하는 문제를 알아내야 겠습니다.
어차피 모두 캐싱되도록 서버 세팅을 잘 해두셨다면 압축에 따른 트래픽 절약은 거의 없습니다.