[CSS] 폰트 안티앨리어싱 Anti-Aliasing

 

 

윈도우와 맥에서 브라우저 폰트 렌더링이 조금 다른 경우가 있다.

같은 폰트라도 맥과 윈도우에서 차이가 좀 있는데 윈도우가 조금 더 계단식으로 번지는 느낌인데 사실 폰트차도 좀 심하다.

맥에서는 이 같은 현상을 해결하는 안티 앨리어싱 Anti-Aliasing이 적용되고 있지만 윈도우에서는 가끔 느껴진다 😭

이 부분을 수정하기 위해서는 폰트 안티앨리어싱을 적용해주어야 한다.

 

 

안티앨리어싱을 원하는 span, p, heading 태그 등에 

아래와 같이 아주 약간의 회전을 주면 윈도우에서 안티앨리어싱을 적용해준다.

 

span{
    transform: rotate(0.04deg);
}

 

 

적용 전

 

 

 

적용 후 

 

 

사실 무슨 차이인지 모르겠는

.

---

 

 

사실 이 글을 쓴 이유는 저 페이지들을 처음 마크업 할 때는 반드시 넣어서 맥과 윈도우의 상태를 동일하게 보이게 하겠다는 목표였는데!!!

어느날부터 카페24 내에서 불러들어와지는 상세페이지에 이상한 공백이 들어갔다.

보니 {$product_detail} 변수로 받아와지는 태그가 <p><img/></p> 인데 이 p 태그가 부모 div의 왼쪽 꼭짓점에 붙지 않고

padding-left 마냥 간격이 살짝 띄워져 있는 것이다.

div에 padding 값도 없애보았는데도 붙지 않아서 모든 속성을 다 검토해보니까 안티 앨리어싱으로 준 transform 문제였다.

카페24 가 변수로 보내는 태그는 내 마음대로 수정할 수 없어서 CSS로 잡아주어야 하는데 p 태그에 transform으로 회전이 걸려있어서 내부의 img가 들떴던 것.

이 김에 그냥 안티앨리어싱 태그들도 다 빼버렸다.