질문/조언질답게시판

테스트로 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 의 파일의 폰트 설정을 참조해서 폰트가 잘못 나오고 있네요.

  • 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
    신규 방문자에게 조금 더 트래픽을 적게 소진 할 방법을 찾다가 압축을 해서 좀더 데이터 전송을 줄여보려고 하는 것이라서요.