글 넓이(font-stretch)가 지원되지 않는 폰트에서 사용하기

#font-stretch #scale

 

 

안녕하세요. Gi_1의 개발일기입니다.

최근 이직하여 근무중인데 글자의 넓이라는 것을 사용한다는 것을 들었습니다. 폰트의 글자 넓이나 높이를 강제로 깬다는 내용이였는데요. 관련 검색을 하다 font-stretch를 발견했지만 지원되는 폰트가 많지 않더군요..

 

따라서 강제로 이용하는 방법입니다.

 

    .stretch{

        -webkit-transform:translateX(-1%) scale(0.98,1);

        -moz-transform:translateX(-1%) scale(0.98,1);

        -ms-transform:translateX(-1%) scale(0.98,1);

        -o-transform:translateX(-1%) scale(0.98,1);

        transform:translateX(-1%) scale(0.98,1);

        display: inline-block;

    }

 

 

    .stretch.center{

        -webkit-transform:scale(0.98,1);

        -moz-transform:scale(0.98,1);

        -ms-transform:scale(0.98,1);

        -o-transform:scale(0.98,1);

        transform:scale(0.98,1);

    }

 

가운데정렬을 하는 경우와 그렇지 않은 경우에 따라 CSS를 다르게 작성 할 필요가 있습니다.

전체적인 크기를 모두 줄여버려서 왼쪽,오른쪽에 패딩이 1%씩 생기는것처럼 보입니다.

가운데 정렬을 할 땐 상관이 좀 없겠지만 아닐 때에는 밀린만큼 다시 돌려줄 필요가 있습니다.

따라서, 글자 넓이를 2% 줄여 98%로 설정했다면, 양옆에 1%씩 밀린 것 이므로 왼쪽에서 1%를 당겨주면 됩니다.

 

그렇게 하면 아래와 같이 되어서 정렬또한 맞출 수 있습니다.

오른쪽 정렬이라면 반대로 하면 되겠죠.

 

하지만, 웹에서 글자 넓이를 설정하는 것은 아직까지는 권장 드리고 싶지가 않네요 ^^;