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 설정 :

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

Firefox의 16pt와 같은 브라우저 기본값은 Firefox 옵션으로 이동하여 내용 탭을 클릭하고 글꼴 크기를 확인하여 확인할 수 있습니다. 다른 브라우저에서도 동일하게 수행 할 수 있습니다.

개인적으로 웹 사이트의 기본 글꼴 크기를 제어하고 싶습니다. 따라서 모든 페이지에 포함 된 CSS 파일에서 BODY 기본값을 다음과 같이 설정합니다.

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

이제 모든 HTML 태그의 글꼴 크기는 14px의 글꼴 크기를 상속합니다.

모든 div가 본문보다 10 % 큰 글꼴 크기를 갖기를 원한다고 간단히 말하십시오.

div {
    font-size: 110%
}

이제 내 페이지를 보는 모든 브라우저는 모든 div를 본문보다 10 % 크게 만듭니다. 이는 15.4px와 같아야합니다.

모든 div의 글꼴 크기를 10 % 작게하려면 다음을 수행하십시오.

div {
    font-size: 90%
}

이렇게하면 모든 div의 글꼴 크기가 12.6px가됩니다.

또한 font-size가 상속되므로 중첩 된 각 div가 글꼴 크기가 10 % 감소한다는 것을 알아야합니다.

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

내부 div의 글꼴 크기는 11.34px (90 % of 12.6px)이며 의도하지 않았을 수 있습니다.

이것은 설명에 도움이 될 수 있습니다 : http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

글꼴을 다음과 같이 설정하면

body {
  font-size: 100%;
}

브라우저는 해당 브라우저의 사용자 설정에 따라 글꼴을 렌더링합니다.

스펙은 %가 렌더링된다고 말합니다.

부모 요소의 글꼴 크기를 기준으로

http://www.w3.org/TR/CSS1/#font-size

이 경우 브라우저가 설정된 것을 의미합니다.

font-size속성 값의 백분율 은 부모 요소의 글꼴 크기를 기준으로 합니다. CSS 2.1은 이것을 모호하고 혼동스럽게 말하지만 ( "상속 된 글꼴 크기"라고 함) CSS3 Text 는 매우 명확하게 말합니다 .

body요소 의 부모는 루트 요소, 즉 html요소입니다. 스타일 시트에서 설정하지 않으면 루트 요소의 글꼴 크기는 구현에 따라 다릅니다. 일반적으로 사용자 설정에 따라 다릅니다.

font-size: 100%스타일 시트가 자체 글꼴 크기를 설정하지 않으면 요소가 부모의 글꼴 크기를 상속하므로 (같은 결과로 이어짐) 많은 경우 설정 은 의미가 없습니다. 그러나 다른 스타일 시트 (브라우저 기본 스타일 시트 포함)의 설정을 재정의하는 것이 유용 할 수 있습니다.

예를 들어, input요소는 일반적으로 브라우저 스타일 시트에 설정이있어 기본 글꼴 크기가 복사 텍스트보다 작습니다. 글꼴 크기를 동일하게 설정하려면

입력 {font-size : 100 %}

이 body요소의 경우 논리적으로 중복되는 설정 font-size: 100%은 일부 브라우저 버그 (현재 중요성을 잃어버린 브라우저)에 대해 도움이되는 것으로 간주되므로 상당히 자주 사용됩니다.

pt 또는 px 값으로 대체하지 않는 한 기본 브라우저 글꼴 크기와 관련이 있습니다.

파티에 늦었다면 죄송하지만 편집 font: 100% Georgia에서 다른 답변에 응답하지 않은 에 대해 언급 합니다.

font: 100% Georgia와 사이에는 차이가 font-size:100%; font-family:'Georgia'있습니다. 그것이 모든 속기 방법이라면 글꼴 크기 부분은 의미가 없습니다. 그러나 또한 많은 속성을 기본값으로 설정합니다. 선 높이가 normal(또는 약 1.2), 스타일 (비 이탈리아) 및 가중치 (굵지 않음)가됩니다.

그게 다야. 다른 답변은 이미 언급 한 모든 것을 언급했습니다.

설득력있게 보여 주듯이 font-size: 100%;모든 브라우저에서 동일하게 렌더링되지는 않습니다. 그러나 CSS 파일에 서체를 설정하므로 모든 브라우저에서 동일하거나 대체 될 수 있습니다.

나는 font-size: 100%;그것을 em기반 디자인 과 결합 할 때 매우 유용 할 수 있다고 생각 합니다 . 이 기사에서 알 수 있듯이 매우 유연한 웹 사이트가 만들어집니다.

언제 유용한가요? 귀하의 사이트가 방문자의 희망에 적응해야 할 때. 기본 글꼴 크기를 24px로 설정하는 노인을 예로 들어 보겠습니다. 또는 해상도가 큰 작은 화면을 가진 사람은 그렇지 않으면 기본 글꼴 크기가 증가합니다. 대부분의 사이트는 중단되지만 em 기반 사이트는 이러한 상황에 대처할 수 있습니다.

해당 글꼴에 정의 된 기본 크기를 기준으로합니다.

누군가 웹 브라우저에서 페이지를 열면 기본 글꼴 및 글꼴 크기가 사용됩니다.

내 이해에 따르면 귀하의 콘텐츠가 다른 글꼴 모음 및 글꼴 크기 값으로 조정되는 데 도움이되므로 콘텐츠를 확장 가능하게 만듭니다. 글꼴 크기 상속 문제와 관련하여 요소의 특정 글꼴 크기를 제공하여 항상 재정의 할 수 있습니다.

1996 년으로 돌아가는 모든 사양 에 따르면 , 백분율 값 font-size은 부모 요소의 (계산 된) 글꼴 크기를 나타냅니다.

<style>
div {
  font-size: 16px;
}
span {
  font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>

그렇게 쉽습니다.

s div와 같은 상대적인 글꼴 크기 em또는 다른 백분율을 선언하면 어떻게 될까요? 위의 "계산 된"을 참조하십시오 . 상대 단위가 변환되는 절대 단위.

남아있는 유일한 질문은 부모가없는 루트 요소에 백분율 값을 사용할 때 발생하는 것입니다.

html {
  font-size: 62.5%; /* 62.5% of what? */
}

이 경우이 질문 의 "중복" 을 참조하십시오 . TLDR : 루트 요소의 백분율은 브라우저 기본 글꼴 크기를 나타내며 사용자마다 다를 수 있습니다.

참고 문헌 :

• CSS 1 사양 (1996)
• CSS 2.1 사양 (2011)
• CSS 글꼴 수준 3 사양 (2013)
• CSS Fonts Level 3 에디터 초안 (2017)