같은 폰트가 사용된 페이지를 서로 다른 브라우저에서 확인했을 때 민감한 분이라면 차이를 느낄 수 있습니다. 하지만 이는 폰트가 잘못 적용된 것이 아닌, 브라우저나 운영체제에 따라 폰트를 표현하는 방식이 달라 차이가 발생하는 것입니다.
위 이미지는 Google Fonts - Roboto 에서 폰트 크기를 13px로 조정한 상태에서 캡쳐한 것입니다. 보시다시피 같은 폰트임에도 브라우저나 심지어 같은 브라우저라도 운영체제에 따라서 미묘하게 다른 형태로 표현되는 것을 확인할 수 있습니다.
폰트 랜더링 차이는 조정이 어렵습니다.
웹사이트 운영자는 브라우저마다 폰트가 다르게 표현되는 것을 원치 않을 수 있습니다. 하지만 운영체제 및 브라우저 차원의 문제이기 때문에 웹페이지의 언어로는 제어가 불가합니다. 일부 CSS의 마크업(예: -webkit-font-smoothing: antialiased)으로 글꼴을 조금 더 부드럽게 하는 등의 조정이 가능하지만, 근본적으로 같은 랜더링으로 표현하는 것은 불가능합니다.
대신 줄바꿈이나 줄간격 차이를 고려합니다.
폰트 랜더링을 바꾸는 것은 불가하기 때문에 폰트 랜더링 차이에 의해 발생하는 글꼴의 크기(폭, 높이)차로 인한 줄바꿈 현상을 방지하는데 더 신경을 써야 합니다.
예를들어 텍스트가 들어갈 공간이 텍스트의 길이와 딱 맞게 표현되고 있다면, 어떤 브라우저에서는 공간이 충분하지 않아 의도치 않은 텍스트 줄바꿈이 발생할 수 있습니다. 따라서 텍스트가 삽입될 공간을 텍스트 길이보다 충분히 확보해 놓는 것이 바람직 합니다.
같은 폰트가 사용된 페이지를 서로 다른 브라우저에서 확인했을 때 민감한 분이라면 차이를 느낄 수 있습니다. 하지만 이는 폰트가 잘못 적용된 것이 아닌, 브라우저나 운영체제에 따라 폰트를 표현하는 방식이 달라 차이가 발생하는 것입니다.
위 이미지는 Google Fonts - Roboto 에서 폰트 크기를 13px로 조정한 상태에서 캡쳐한 것입니다. 보시다시피 같은 폰트임에도 브라우저나 심지어 같은 브라우저라도 운영체제에 따라서 미묘하게 다른 형태로 표현되는 것을 확인할 수 있습니다.
폰트 랜더링 차이는 조정이 어렵습니다.
웹사이트 운영자는 브라우저마다 폰트가 다르게 표현되는 것을 원치 않을 수 있습니다. 하지만 운영체제 및 브라우저 차원의 문제이기 때문에 웹페이지의 언어로는 제어가 불가합니다. 일부 CSS의 마크업(예: -webkit-font-smoothing: antialiased)으로 글꼴을 조금 더 부드럽게 하는 등의 조정이 가능하지만, 근본적으로 같은 랜더링으로 표현하는 것은 불가능합니다.
대신 줄바꿈이나 줄간격 차이를 고려합니다.
폰트 랜더링을 바꾸는 것은 불가하기 때문에 폰트 랜더링 차이에 의해 발생하는 글꼴의 크기(폭, 높이)차로 인한 줄바꿈 현상을 방지하는데 더 신경을 써야 합니다.
예를들어 텍스트가 들어갈 공간이 텍스트의 길이와 딱 맞게 표현되고 있다면, 어떤 브라우저에서는 공간이 충분하지 않아 의도치 않은 텍스트 줄바꿈이 발생할 수 있습니다. 따라서 텍스트가 삽입될 공간을 텍스트 길이보다 충분히 확보해 놓는 것이 바람직 합니다.