[css] CSS : 글꼴 크기 100 %-무엇의 100 %?

백분율 크기와 다른 크기의 글꼴에 대한 많은 기사 와 질문 이 있습니다 . 그러나 백분율 값의 참조가 무엇인지 알 수 없습니다. 나는 이것이 모든 브라우저에서 동일한 크기라는 것을 이해합니다. 나는 또한 이것을 읽었다.

퍼센트 (%) : 퍼센트 단위는“em”단위와 매우 유사하며 몇 가지 근본적인 차이점을 제외하고는 절약합니다. 가장 먼저 현재 글꼴 크기는 100 %입니다 (즉, 12pt = 100 %). 퍼센트 단위를 사용하는 동안 텍스트는 모바일 장치 및 접근성을 위해 완벽하게 확장 가능합니다.

출처 : http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

그러나 “즉, 12 pt = 100 %”라고 말하면 먼저 정의해야합니다 font-size: 12pt. 그게 어떻게 작동합니까? 먼저 절대 측정에서 크기를 정의한 다음 ‘100 %’라고합니까? 많은 샘플이 다음과 같이 말하는 것이 유용하다고 말하면서 많은 의미가 없습니다.

body {
  font-size: 100%;
}

그래서이 작업을 수행하여, 무엇 에 글꼴 크기 상대인가? 화면에 표시되는 크기가 모든 글꼴마다 다릅니다. 예를 들어, Arial은 Times New Roman보다 더 크게 보입니다. 또한 내가 이것을하면 신체 크기 = 100 %라면 모든 브라우저에서 동일 하다는 것을 의미합니까? 아니면 내가 절대 값을 처음 정의한 경우에만?

업데이트, 토요일 7 월 23 일

나는 거기에 도착하고 있지만 나와 함께 견뎌주십시오.

따라서 % 값을 올바르게 이해하면 기본 브라우저 글꼴 크기와 관련이 있습니다. 글쎄, 그것은 좋지만 몇 가지 다른 질문을 다시 제공합니다.

1. 이 표준 크기는 모든 브라우저 버전에서 항상 동일합니까, 아니면 버전마다 다릅니 까?
2. 나! Chrome에 대한 설정을 찾았으며 (아래 이미지 참조) (이전에 본 적이 없습니다!) 표준 “serif”, “sans-serif”및 “monospace”설정이 표시됩니다. 그러나 다른 글꼴에 대해서는 어떻게 해석합니까? font: 100% Georgia;브라우저가 어느 정도의 크기를 정의 할까요? serif의 표준 크기를 찾거나 브라우저의 표준 크기 인 “Georgia”글꼴이 있습니까?
3. 여러 웹 사이트에서 나는 같은 것을 읽습니다Sizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today . 그러나 지금 배우고있는 것에서 실제로 크기를 조정할 수있는 텍스트 (이 인용문에서 권장하는 것과 같이 % 또는 em 사용) 또는 ‘브라우저에서 정확하고 일관된 글꼴 크기’를 선택해야합니다 (px 또는 기준으로 pt). 이 올바른지?

Google 설정 :

내가 얼마나입니다 생각하는 일을 할 수 는 절대 값의 크기를 정의하지 않을 경우처럼 보인다.

답변

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px
}

div {
    font-size: 110%
}

div {
    font-size: 90%
}

<div>Outer DIV.
    <div>Inner DIV</div>
</div>

body {
  font-size: 100%;
}