CSS 스타일에서 글꼴 크기를 설정하는 방법

CSS 스타일에서는 "font-size" 속성을 사용하여 글꼴 크기를 설정할 수 있습니다. "font-size: value;" 스타일을 텍스트 요소에 설정하세요. 글꼴 크기 속성은 글꼴 크기를 설정하는 데 사용됩니다. 실제로 글꼴의 문자 상자 높이를 설정합니다. 실제 문자 글리프는 상자보다 크거나 짧을 수 있습니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 스타일에서는 "font-size" 속성을 설정하여 글꼴 크기를 설정할 수 있습니다.

font-size 속성을 사용하여 요소에 포함된 텍스트의 글꼴 크기를 설정할 수 있습니다. 요소가 글꼴 크기 속성을 명시적으로 정의하지 않으면 상위 요소의 글꼴 크기 속성 계산 결과를 자동으로 상속합니다.

사실, 글꼴 크기 속성은 글꼴의 문자 상자 높이를 설정합니다. 실제 문자 글리프는 이 상자보다 크거나 짧을 수 있습니다(보통 더 짧음).

글꼴 크기를 정의할 때 사전 정의된 키워드, 절대 크기 및 상대 크기를 사용할 수 있습니다.

1) 사전 정의된 키워드

사전 정의된 키워드에는 xx-small, x-small, small, Medium, Large, x-가 포함됩니다. 대, xx-대, 옷의 사이즈와 비슷하게 순서대로 사이즈가 커집니다.

미리 정의된 키워드를 사용하면 두 가지 주요 단점이 있습니다. 첫째, 선택 항목이 7개뿐이고 선택 범위가 너무 작습니다. 둘째, 옷의 크기와 마찬가지로 제조업체마다 글꼴의 정확한 값이 다를 수 있습니다. 각 키워드에 해당하는 크기가 다르며, 텍스트의 크기는 브라우저마다 다를 수 있습니다. 따라서 미리 정의된 키워드를 사용하여 글꼴 크기를 정의하는 것은 권장되지 않습니다.

2) 절대 크기

절대 크기에는 px(픽셀), pt(포인트, 1pt는 1/72in에 해당), in(인치), cm(센티미터), mm(밀리미터) 등이 포함됩니다. 예:

.px {
 font-size: 14px;
}
.pt {
 font-size: 10pt;
}
.in {
 font-size: .15in;
}
.cm {
 font-size: .4cm;
}
.mm {
 font-size: 4mm;
}

<p class="px">字体大小： 14px</p>
<p class="pt">字体大小： 10pt</p>
<p class="in">字体大小： .15in</p>
<p class="cm">字体大小： .4cm</p>
<p class="mm">字体大小： 4mm</p>

위 코드는 5가지 글꼴 크기를 정의하며 모두 절대 단위를 사용합니다. 절대 길이 단위를 사용한 후에는 고정 해상도의 모니터에 표시되는 내용이 고정 크기입니다. 실행 결과는 아래 그림과 같습니다.

글꼴 크기를 px 단위로 설정한 경우 IE 브라우저를 사용하는 사용자는 브라우저에서 "텍스트 크기"를 설정하여 텍스트를 확대하거나 축소할 수 없습니다. 텍스트가 너무 작으면 읽기에 영향을 미치고 사용자 경험이 크게 저하됩니다.

3) 상대 크기

상대 크기에는 em, %, rem이 포함됩니다. 모두 현재 글꼴의 크기를 계산하기 위한 특정 참조 기준을 기준으로 한 글꼴 크기이지만 참조 기준은 다릅니다.

em의 참조 기반은 상위 요소입니다. 그렇다면 지정할 em 값을 어떻게 계산합니까? 실제로 1em은 항상 상위 요소의 글꼴 크기 속성 값과 동일하며, 이것이 em 작동 방식입니다. 따라서 백분율 값은 다음 공식에 의해 결정될 수 있습니다:

대상 요소의 글꼴 크기 / 상위 요소의 글꼴 크기 = 값目标元素的字体大小 / 父元素的字体大小 = 值

因此，在使用 em 定义字体大小时，最好在 html 或 body 元素上建立一个基准。假设在 body 中设置的基准大小为 12px：

body {
 font-size: 12px;
}

如果希望 body 中所有段落的字体大小为 18px，根据上述公式：

18 / 12 = 1. 5

따라서 em을 사용하여 글꼴을 정의하는 경우 크기를 결정하려면 html 또는 body 요소에 기반을 설정하는 것이 가장 좋습니다. 본문에 설정된 기본 크기가 12px이라고 가정:

body p {
 font-size: 1.5em;
}

위 수식에 따라 본문의 모든 단락의 글꼴 크기를 18px로 지정하려면:

18 / 12 = 1. 5<p></p>따라서 단락의 글꼴 크기를 1.5em으로 설정하면 됩니다. 이 규칙은 단락 텍스트의 글꼴 크기가 상위 요소의 텍스트 크기의 1.5배라는 것을 의미합니다. <p><pre class="brush:css;toolbar:false;">p.one { font-size: 1.5em; } p.one { font-size: 150%; }</pre></p>% 참조 기준은 다음과 같습니다. 또한 상위 요소인 100%는 항상 상위 요소의 글꼴 크기 속성 값과 같습니다. 즉, 1em은 100%와 같습니다. 즉, %를 사용하여 글꼴 크기를 정의하는 경우 em 값을 해당 백분율로 변환하기만 하면 됩니다. 따라서 다음 두 선언은 동일한 결과를 제공합니다(두 단락에 동일한 상위 요소가 있다고 가정). <p><pre class="brush:css;toolbar:false">p { font-size: 12px; } em { font-size: 200%; } strong { font-size: 200%; }</pre></p> 글꼴 크기는 상속 가능하지만 % 및 em을 사용하여 글꼴 크기를 정의할 때 하위 요소는 % 및 em의 숫자가 아닌 계산 결과의 값을 상속합니다. 또한, %, em도 누적될 수 있습니다. 다음 코드를 고려해보세요. <p><pre class="brush:html;toolbar:false">&lt;p&gt;12px &lt;em&gt; 200% &lt;strong&gt; 200% &lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;</pre><pre class="brush:php;toolbar:false">em：12 × 200% = 24px strong：24 × 200% = 48px</pre><img src="https://img.php.cn/upload/image/156/513/505/1623131461464003.png" title="1623131461464003.png" alt="CSS 스타일에서 글꼴 크기를 설정하는 방법">위 코드에서 p는 상위 요소이고, em은 p의 하위 요소이며, Strong은 em의 하위 요소입니다. em 요소의 기본은 p 요소이고, Strong 요소의 기본은 em 요소입니다. 계산 결과는 다음과 같습니다. </p><pre class="brush:css;toolbar:false">html { font-size: 10px; } p { font-size: 1.4rem; }</pre><p>실행 결과는 아래 그림과 같습니다. </p> <p></p>🎜🎜이 다단계 중첩의 경우 특정 계산 결과가 정수가 아닌 경우 브라우저에서 반올림할 수 있습니다. 그런 다음 반올림된 값을 상속받습니다. 중첩이 매우 깊으면 기본 레이어의 글꼴 크기가 실제 계산된 값에서 점점 더 벗어나게 됩니다. 그리고 참조 기준은 요소에 따라 항상 변경되므로 중첩이 깊어질수록 계산이 더 어려워집니다. 🎜🎜이를 고려하여 CSS3의 새로운 상대 단위 rem(root em의 약어)은 항상 문서의 루트 요소(예: html 요소)를 참조로 사용하여 다른 요소의 글꼴 크기를 설정합니다. 즉, 1rem은 html 요소의 글꼴 크기 속성 값과 동일합니다. 다음 코드를 고려해보세요: 🎜<pre class="brush:css;toolbar:false">html { font-size: 10px; } p { font-size: 1.4rem; }</pre><p>上述声明中，p 元素的字体大小将是 html 字体大小的1.4倍，则计算得到 p 元素的字体大小就是1.4 × 10px = 14px。</p> <p>这样一来，无论嵌套多少层，参考基准始终不变，计算字体大小就变得容易多了。不过，需要注意的是，rem 是CSS3新增的一个相对单位，IE9 以下版本的老浏览器却不支持它，这也是很多编程人员尚未使用 rem 的原因。</p> <p>在定义字体大小时，笔者建议在 html 元素中定义绝大多数元素所需要的字体大小，并让所有子元素继承 html 的字体大小。如果某个子元素需要要改变字体大小，则使用相对尺寸 em 或 % 或 rem 重新定义。</p> <p>这样做的好处是，一方面，绝大多数元素都不必定义字体大小，减少不必要的定义；另一方面，如果完成所有的文字排版后，又要统一调整页面文字大小，就可以只修改 html 中的字体大小，其它所有文字的字体大小会自动变化，修改起来就很容易。</p> <p><strong>说明：</strong></p> <p>在某些特殊场景下，需要把 font-size 的值设置为0，来隐藏某些文本。但是，在IE6和IE7中，font-size: 0 的文本却变成了小黑点，并没有完全隐藏。</p> <p>解决这个问题的最简单办法，就是在 font-size: 0 的同时，把 text-indent 属性设置为一个很大的负值，让这些文本显示在屏幕之外，自然就被隐藏起来。</p> <p>（学习视频分享：<a href="https://www.php.cn/course/list/12.html" target="_blank">css视频教程</a>）</p>

위 내용은 CSS 스타일에서 글꼴 크기를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!