[Figma][CSS] Figma의 Text와 퍼블리싱된 HTML Text 의 모습이 다르게 나타나는 경우

Figma의 모습이 퍼블리싱 되었을 때 모습이 조금 달라보이는데..
그럴 수 있는건가? 라는 질문을 받았다.

그게 말이되나.. 생각했었는데 말이 되네..ㅋㅋㅋ

아래의 캡쳐 모습을 보면 미묘하게 다르다.

피그마 모습

HTML 모습

1004lucifer

[ 500% 확대한 모습 ]

피그마

HTML

일부러 간단한 페이지를 만들어서 테스트를 했는데 확실히 다르다는걸 알 수 있었다.

피그마에서 canvas 태그에 렌더링 할때 글자에 안티앨리어싱(Anti-Aliasing) 처리가 되어있는것을 알 수 있다.

글자크기가 큰 경우에는 크게 티가 안나지만 글자 크기가 작을수록 더 티가 난다.
폰트에 따라 피그마가 더 두꺼워 보이거나 얇아보일 수 있다고 생각이든다

다르다는게 확실히 검증하고나서 다시 구글 검색을 해보니 해당 이슈에 대한 글을 찾아볼 수 있었다.;;

[ figma의 폰트가 더 얇아보이는 이유 ]
(https://jodnddus.blog/why-diff-btwn-figma-browser)

[ Figma의 글꼴 두께가 브라우저의 동일한 두께보다 가벼워 보이는 이유는 무엇입니까? ]
(https://forum.figma.com/t/why-does-a-font-weight-in-figma-seem-lighter-than-the-same-weight-in-the-browser/2207)

Programming Log