질문/공유질답게시판

라이믹스 CSS 압축 기능 사용시 폰트 적용이 이상해지는 문제

웹지기
Extra Form
PHP PHP 7.2
CMS Rhymix

테스트로 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
  • profile
    @charset "utf-8"

    이친구 문제가 아닐까 싶습니다.
    각 CSS 파일에서 해당 코드를 삭제해 주시면 될 것 같아요.
  • profile profile
    아.. 그게 없어야 하는건가요??? 같은 파일 안에 다른 요소는 또 적용이 됩니다.
  • profile profile
    오.. 그렇네요. 정말 그부분 제거하니 이제 정상 동작 합니다.

    압축했을때 용량이 오히려 크게 증가하는 문제를 알아내야 겠습니다.
  • profile profile

    지금 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" 부분을 일괄적으로 처리해 주어도 될거라 생각하는데,
    일단 지금 곧바로 사용하시려면 해당 부분을 삭제하시면 될 거 같아요.

  • profile
    압축 기능을 감안하지 않고 (압축 상태에서 테스트해보지 않고) 만들어진 서드파티 자료는 거의 모두 깨진다고 보시면 됩니다. 합치기는 그나마 낫습니다.

    어차피 모두 캐싱되도록 서버 세팅을 잘 해두셨다면 압축에 따른 트래픽 절약은 거의 없습니다.
  • profile profile
    신규 방문자에게 조금 더 트래픽을 적게 소진 할 방법을 찾다가 압축을 해서 좀더 데이터 전송을 줄여보려고 하는 것이라서요.