사용자가 웹 페이지의 글꼴 크기를 제어할 수 있는 CSS 작성 방법_경험 교환

요즘 대부분의 국내 웹사이트에서는 CSS를 사용하여 글꼴 크기를 12px로 설정합니다. 픽셀도 상대적인 크기 단위이지만 화면 해상도가 확실할 때 글꼴 크기가 너무 작다고 느끼면, 읽기 어려우시면 비표준 브라우저에서는 어쩔 수 없으니 단위를 em으로 바꾸시면 CTRL+마우스 스크롤로 텍스트를 크게 보시거나 메뉴의 보기 > 텍스트 크기로 바꾸시면 됩니다. 텍스트의 크기.

설정 방법

1. body 태그의 글꼴 크기를 62.5%로 설정합니다. 62.5%로 설정하면 글꼴 크기는 16px*62.5%=10px입니다. 이때 em을 사용하면 크기를 쉽게 설정할 수 있습니다. 예를 들어 12px를 사용해야 하는 경우 1.2em으로 설정하면 됩니다.

body{
font-size: 62.5%;
}

h1{
fong-size: 1.4em;/* h1 글꼴 크기는 14px에 해당합니다. /
}
2. 본문의 글꼴 크기를 75%로 설정한 다음 글꼴 크기 = 16px*75%=12px, 1em은

body{
font- size: 75%;
}

h1{
fong-size: 1.5em;/* h1 단어의 크기는 18px에 해당합니다. */
}

첫 번째 방법이 더 좋습니다.

영어 사이트라면 small, x-small로 설정할 수도 있습니다...

물론 이렇게 하면 페이지에 대한 디자인 요구 사항이 더 높아집니다.