CSS 다양한 브라우저에 대응하기(2)

CSS 스타일 초기화와 연결해 계속 이야기 해봅니다. CSS를 이용해서 웹 컨턴츠의 디자인을 구성할 때 서로다른 브라우저의 스타일들이 최대한 동일하게 보이게 하기 위한 방법으로 CSS 정규화를 다시 함으로, 브라우저 마다의 초기 CSS의 셋팅 상태를 최대한 일정하게 맞추어 놓고 작업을 진행하면, 문제를 줄일 수 있다하여 보았습니다. 

오늘은 웹브라우저에서 보여주는 폰트정규화를 하는 방법을 기록해 보고자 합니다. 브라우저는 각기 브라우저마다 텍스트 폰트를 랜더링해주는 방법이 다릅니다. 그래서 기본으로 보여주는 텍스트의 폰트나 사이즈가 제 각각인 경우가 대부분입니다. 이러한 제 각각인 텍스트를 통일하기 위하여, CSS에서 스타일 초기화와 같은 작업을 하여 사용하면, 서로 다른 크기로 보이는 폰트 문제를 해결 하기 쉽습니다. 

이 방법 또한 마찬가지로 실효성에 대해서는 직접 사용해보고 필요에 따라 조정하는 것이 좋을 것 같습니다. 여기서는 전에 포스팅과 마찬가지로 야후에서 제공한 CSS스타일 시트를 이용하도록 하겠습니다. 

http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css 

에 있는 CSS를 적용하고 나면, 폰트사이즈를 백분율 단위로 조정 할 수 있습니다. 아래 보시는 것이 백분율 대비 폰트사이즈가 어떻게 적용 되어지는지 일 수 있습니다. 
이 내용에 따라 폰트사이즈를 조정하게되면 여러 브라우져에서 동일한 폰트 사이즈로 렌더링 되는 것을 보실 수 있습니다.

10 77%

11 85%

12 93%

13 100%

14 108%

15 116%

16 123.1%

17 131%

18 138.5%

19 146.5%

20 153.9%

21 161.6%

22 167%

23 174%

24 182%

25 189%

26 197%