모바일 웹 개발 시, 특정 사이즈 이상의 모바일 화면에서 font-size가 크게 보이는 경우가 있어요.

아이폰의 경우 뷰포트가 변경이 되면 자동으로 폰트 크기를 조절하기 때문입니다.

(ex IOS iphone8+, X에서 폰트 크기가 커짐/ 안드로이드는 괜찮은 것 같아요.)

​

이때 사용할 수 있는 속성이 text-size-adjust 입니다. (비표준 속성)

​

Css 파일에 아래코드 추가

html {

/* Prevent font scaling in landscape */

-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/

-moz-text-size-adjust: none; /*Firefox*/

-ms-text-size-adjust: none; /*Ie*/

-o-text-size-adjust: none; /*old versions of Opera*/

}

​

Property

값

설명

auto

화면의 폭에 맞게 텍스트의 크기를 자동으로 조절

( 디바이스의 렌더링이 다르다면 다르게 렌더링 되므로 추천하지 않음)

none (기본값)

기본값. 폰트 크기 조정을 하지 않음

percentage

폰트크기를 명시적으로 지정

(100%를 주어 모든 디바이스에서 동일하게 보여줄 수 있음/ 크게, 작게 가능)

inherit

부모 요소의 text-size-adjust 값을 물려받음

​

주의) 영어 소문자 크기를 조정하는 * font-size-adjust 와 혼동하지 말것!! (number | none | inherit;)

Property

값

설명

number

숫자로 직접 크기를 지정

none

기본값. 폰트 크기 조정을 하지 않음

inherit

부모 요소의 font-size-adjust 값을 물려받음

영어는 폰트의 종류에 따라 대,소문자의 크기가 다르게 표현 됨 (특히 소문자)

예를 들어 Verdana 의 대문자가 1 이라면 소문자 크기는 0.58 (Aspect Value) 의 크기인 것이다.

이러한 이유 때문에 브라우저에서 첫 번째 font 를 사용할 수 없게 될 경우, 두 번째로 지정된 폰트를 랜더링하는데 글자 크기가 같은 px 라도 들쭉날쭉하게 보여질 수 있다.

이런 것을 방지하기 위해 font-size-adjust 속성을 사용하게 되면 서로 다른 폰트 종류라도 소문자의 처음 지정된 폰트의 크기로 유지하여 가독성을 높일 수 있다. 하지만 현재 Firefox 에서만 지원한다

​

출처: http://siana.tistory.com/entry/CSS3-font-size-adjust-대채폰트의-크기조절-x-height-Aspect-Value [샷타이거's Simple Blog]

​

​