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

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. 저는 구글 크롬의 설정을 찾았고(아래 이미지 참조), 표준 "serif", "sans-serif", "monospace" 설정을 봅니다.그러나 다른 글꼴의 경우 이를 어떻게 해석해야 합니까?정의한다고 말함font: 100% Georgia;, 브라우저의 크기는 어떻게 됩니까?까의 것인가? 아니면 "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 설정:

절대값으로 크기를 정의하지 않으면 상황이 이렇게 보일 수 있다고 생각합니다.

파이어폭스의 브라우저 기본값은 16pt와 같습니다. 파이어폭스 옵션으로 들어가 내용 탭을 클릭하고 글꼴 크기를 확인하면 확인할 수 있습니다.다른 브라우저에서도 똑같이 할 수 있습니다.

저는 개인적으로 웹사이트의 기본 글꼴 크기를 조절하는 것을 좋아하기 때문에 모든 페이지에 포함된 CSS 파일에서 BODY 기본값을 다음과 같이 설정합니다.

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

이제 모든 HTML 태그의 글꼴 크기는 14px의 글꼴 크기를 이어받게 됩니다.

모든 디브의 글자 크기가 바디보다 10% 더 컸으면 좋겠다고 생각하면, 저는 그저 이렇게 할 뿐입니다.

div {
    font-size: 110%
}

이제 내 페이지를 보는 모든 브라우저는 자동으로 모든 div를 본체의 div보다 10% 더 크게 만들 것입니다. 이것은 15.4px 정도여야 합니다.

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

div {
    font-size: 90%
}

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

또한 글꼴 크기가 상속되므로 중첩된 각 디브의 글꼴 크기가 10% 감소하므로 다음과 같은 사항을 알아야 합니다.

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

내부 디브의 글꼴 크기는 11.34px(12.6px의 90%)로, 의도하지 않았을 수도 있습니다.

이것은 설명에 도움이 될 것입니다: 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사이즈

이 경우 브라우저가 설정되어 있는 것을 의미합니다.

font-size속성은 상위 요소의 글꼴 크기에 상대적입니다.CSS 2.1은 이것을 모호하고 혼란스럽게 말하지만("상속된 글꼴 크기"를 언급함), CSS3 Text는 매우 명확하게 말합니다.

의 입니다.body, 즉 element는 root element,즉입니다html요소. 에 설정되지 않은 경우루트 요소의 글꼴 크기는 구현에 따라 달라집니다.스타일시트에 설정하지 않은 경우 루트 요소의 글꼴 크기는 구현에 따라 달라집니다.일반적으로 사용자 설정에 따라 달라집니다.

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

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

입력 { 글꼴 크기: 100% }

은.body요소, 논리적으로 중복되는 설정font-size: 100%일부 브라우저 버그(지금은 중요성을 잃었을 가능성이 있는 브라우저)를 방지하는 데 도움이 될 것으로 믿어지기 때문에 상당히 자주 사용됩니다.

파티에 늦었더라면 미안하지만, 당신의 편집에서 당신은 다음과 같은 말을 했습니다.font: 100% Georgia, 다른 대답들은 대답하지 않았습니다

사이에 차이가 있습니다.font: 100% Georgia그리고.font-size:100%; font-family:'Georgia' 그것이 속기 가 없었을 만약 그것이 속기 방법의 전부라면, 글자 크기 부분은 의미가 없을 것입니다.또한 많은 특성을 기본값으로 설정합니다. 선 높이는normal(또는 약 1.2), 스타일(이탤릭체가 아닌) 및 무게(볼드체가 아닌).

그게 전부입니다.다른 대답들은 이미 그 밖에 언급할 것들을 모두 언급했습니다.

pt 또는 px 값으로 재정의하지 않는 한 기본 브라우저 글꼴 크기에 상대적입니다.

설득력 있게 보여주신 것처럼font-size: 100%;모든 브라우저에서 동일하게 렌더링되지 않습니다.그러나 CSS 파일에서 글꼴을 설정하므로 모든 브라우저에서 동일(또는 폴백)하게 됩니다.

믿어요font-size: 100%;와 결합할 때 매우 유용할 수 있습니다.em- 기본 설계.이 기사에서 알 수 있듯이, 이것은 매우 유연한 웹사이트를 만들 것입니다.

이것은 언제 유용합니까?당신의 사이트가 방문자들의 희망에 적응해야 할 때.기본 글꼴 크기를 24px로 설정한 노인을 예로 들 수 있습니다.아니면 눈을 가늘게 뜨고 있어야 하기 때문에 기본 글꼴 크기가 커지는 해상도의 작은 화면을 가진 사람.대부분의 사이트가 중단되지만, EM 기반 사이트는 이러한 상황에 대처할 수 있습니다.

1996년으로 거슬러 올라가는 모든 사양에 따르면, 백분율 값은font-size상위 요소(computed)의 글꼴 크기를 참조합니다.

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

그렇게 쉬워요.

.div상대 글꼴 크기를 선언합니다. 예:ems, 혹은 더 나쁜, 또 다른 비율?위의 "계산"을 참조하십시오.상대적 단위가 변환하는 절대 단위.

남은 질문은 상위가 없는 루트 요소에서 백분율 값을 사용하면 어떻게 되는지입니다.

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

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

참조:

• CSS 1 사양 (1996)
• CSS 2.1 사양 (2011)
• CSS 글꼴 레벨 3 사양 (2013)
• CSS 폰트 레벨 3 편집자 초안 (2017)

해당 글꼴에 정의된 기본 크기에 상대적입니다.

누군가 웹 브라우저에서 페이지를 열면 사용하는 기본 글꼴과 글꼴 크기가 있습니다.

글꼴 패밀리와 글꼴 크기의 값을 달리하여 내용을 조정할 수 있습니다.따라서 컨텐츠를 확장할 수 있습니다.글꼴 크기 상속 문제의 경우 요소에 대한 특정 글꼴 크기를 지정하여 항상 재정의할 수 있습니다.

언급URL : https://stackoverflow.com/questions/6803016/css-100-font-size-100-of-what