프론트엔드

📍피그마와 브라우저간 폰트 차이나는 현상

journey-dev 2024. 5. 20. 23:47

✅ 문제

피그마 규격대로 똑같이 구현을 했는데 버튼의 너비가 틀어지는 현상 발생

이유는 버튼 안의 글자가 피그마와 브라우저간 다르게 나타나기 때문이다. 

font weight나 자간이 다르게 출력된다.

좌) 피그마 너비 / 우) 브라우저 실제 구현

 

✅ 원인1. 피그마는 자체 폰트 렌더링 방식이 있기 때문에 

피그마는 브라우저등 사용자 환경에 구애받지 않고, 일관된 플래폼을 보여주기 위해 자체 렌더링 방식(antialiasing)을 사용한다.

 

안티앨리어싱 이란?

: 픽셀로 되있어 나타나는 계단 현상을 줄이고 이미지를 부드럽게 만드는 기술.

👉해결법

피그마와 완전 동일한 표현은 불가하다.
css속성을 사용하여 글꼴을 피그마와 비슷하게 표현해줄 뿐이다.

 


1. macOS : font-smooth 사용

Font-smooth 속성은 글꼴이 렌더링될 때 앤티앨리어싱 적용을 막음. 

! 이 속성은 Mac OS 에서만 동작한다. 윈도우 환경에서는 이 방식 적용 불가 !

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: never;

적용 코드

 

 

2. windows : text-shadow 사용

text-shadow: 0 0 1px rgba(0,0,0,0.3);

 

https://gist.github.com/dalethedeveloper/1846552

https://www.elfboy.com/blog/text-shadow_anti-aliasing/

 

 

✅ 원인2. 브라우저 , 운영체제 차이 

같은 폰트여도 브라우저나 운영체제에 따라 다르게 보인다.

1) 운영체제 차이 

Windows, macOS, Linux 등 운영체제 마다 자체적으로 설치된 기본 폰트가 있다.

그리고 브라우저는 그 기본 폰트를 사용하게 된다. 


2) 브라우저 차이

브라우저마다 폰트 렌더링 엔진이 다르다. 즉 브라우저에 텍스트를 표현하는 방식이 다르다.

  • Chrome, Edge : 블링크(Blink) 엔진을 사용
  • Safari : 웹킷(WebKit) 엔진
  • 파이어폭스(Firefox) : 게코(Gecko) 엔진

👉해결법

원인1 해결방안 처럼 적절히 os간의 격차가 크지 않도록 맞춰줄 뿐이다.

 

💡 폰트 개발시 주의사항 💡

환경(브라우저,운영체제)에 따라 폰트 크기가 달라지기 때문에, 텍스트 들어갈 공간의 너비를 좁게 잡으면 줄바꿈이 일어날 수도 있다.

따라서 텍스트 들어갈 공간의 여백을 충분히 잡아야 한다.

 

 

 

※ 참고자료