So legen Sie die Schriftgröße im CSS-Stil fest

In CSS-Stilen können Sie das Attribut „font-size“ verwenden, um die Schriftgröße festzulegen. Legen Sie einfach den Stil „font-size: value;“ fest. Das Attribut „font-size“ wird zum Festlegen der Schriftgröße verwendet. Es legt tatsächlich die Höhe des Zeichenfelds in der Schriftart fest. Das tatsächliche Zeichenzeichen kann höher oder kürzer als das Feld sein.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Im CSS-Stil können Sie die Schriftgröße festlegen, indem Sie das Attribut „font-size“ festlegen.

Sie können die Schriftgröße des im Element enthaltenen Textes über das Attribut „font-size“ festlegen. Wenn ein Element das Attribut „font-size“ nicht explizit definiert, erbt es automatisch das Berechnungsergebnis des Attributs „font-size“ des übergeordneten Elements.

Tatsächlich legt das Attribut „font-size“ die Höhe der Zeichenfelder in der Schriftart fest; die tatsächliche Zeichenglyphe kann höher oder kürzer als diese Felder sein (normalerweise kürzer).

Beim Definieren der Schriftgröße können Sie vordefinierte Schlüsselwörter, absolute Größe und relative Größe verwenden:

1) Vordefinierte Schlüsselwörter

Zu den vordefinierten Schlüsselwörtern gehören xx-klein, x-klein, klein, mittel, groß, x- groß, xx-groß, die Größen nehmen in der Reihenfolge zu, ähnlich der Kleidergröße.

Die Verwendung vordefinierter Schlüsselwörter hat zwei große Nachteile: Erstens gibt es nur 7 Auswahlmöglichkeiten und die Auswahl ist zu klein. Zweitens können verschiedene Hersteller, genau wie bei der Kleidergröße, unterschiedliche genaue Werte für die Schriftart haben Die Größe entspricht jedem Schlüsselwort. Die Größe des Textes kann in verschiedenen Browsern unterschiedlich sein. Daher wird die Verwendung vordefinierter Schlüsselwörter zum Definieren von Schriftgrößen nicht empfohlen.

2) Absolute Größe

Absolute Größen umfassen px (Pixel), pt (Punkte, 1pt entspricht 1/72 Zoll), in (Zoll), cm (Zentimeter), mm (Millimeter) usw. Zum Beispiel:

.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>

Der obige Code definiert 5 Schriftgrößen, alle in absoluten Einheiten. Nach Verwendung absoluter Längeneinheiten wird auf einem Monitor eine feste Größe mit fester Auflösung angezeigt. Die laufenden Ergebnisse sind in der folgenden Abbildung dargestellt:

Wenn die Schriftgröße in px-Einheiten eingestellt ist, können Benutzer, die den IE-Browser verwenden, den Text nicht vergrößern oder verkleinern, indem sie die „Textgröße“ im Browser festlegen. Wenn der Text zu klein ist, beeinträchtigt dies die Lesbarkeit und beeinträchtigt das Benutzererlebnis erheblich.

3) Relative Größe

Zu den relativen Größen gehören em, %, und rem. Sie sind alle Schriftgrößen relativ zu einer bestimmten Referenzbasis, um die Größe der aktuellen Schriftart zu berechnen, aber die Referenzbasis ist unterschiedlich. Die Referenzbasis von

em ist das übergeordnete Element. Wie berechnet man also den anzugebenden em-Wert? Tatsächlich ist 1em immer gleich dem Wert des Attributs „font-size“ des übergeordneten Elements, und genau so funktioniert em. Dementsprechend kann der Wert des Prozentsatzes durch die folgende Formel bestimmt werden:

Schriftgröße des Zielelements / Schriftgröße des übergeordneten Elements = Wert目标元素的字体大小 / 父元素的字体大小 = 值

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

body {
 font-size: 12px;
}

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

18 / 12 = 1. 5

Daher wird bei Verwendung von em die Schriftart definiert Bei der Größe ist es am besten, eine Basis auf dem HTML- oder Body-Element einzurichten. Gehen Sie davon aus, dass die im Hauptteil festgelegte Basisgröße 12 Pixel beträgt:

body p {
 font-size: 1.5em;
}

Wenn Sie möchten, dass die Schriftgröße aller Absätze im Hauptteil 18 Pixel beträgt, gemäß der obigen Formel:

18 / 12 = 1,5<p></p>Setzen Sie daher einfach die Schriftgröße des Absatzes auf 1,5em. Diese Regel bedeutet, dass die Schriftgröße des Absatztextes das 1,5-fache der Textgröße des übergeordneten Elements beträgt: <p><pre class="brush:css;toolbar:false;">p.one { font-size: 1.5em; } p.one { font-size: 150%; }</pre></p>% Die Referenzbasis ist auch das übergeordnete Element, 100 % ist auch Es ist immer gleich dem Wert des Attributs „font-size“ des übergeordneten Elements, dh 1em entspricht 100 %. Mit anderen Worten: Wenn Sie % zum Definieren der Schriftgröße verwenden, müssen Sie nur den em-Wert in den entsprechenden Prozentsatz umwandeln. Daher liefern die folgenden beiden Deklarationen das gleiche Ergebnis (vorausgesetzt, beide Absätze haben das gleiche übergeordnete Element): <p><pre class="brush:css;toolbar:false">p { font-size: 12px; } em { font-size: 200%; } strong { font-size: 200%; }</pre></p>Es ist wichtig zu beachten, dass die Schriftgröße zwar vererbbar ist, bei der Verwendung von % und em zum Definieren der Schriftgröße jedoch die Untergeordnete Elemente erben den Wert des Berechnungsergebnisses, nicht die Zahlen von % und em. Darüber hinaus können % und em auch kumuliert werden. Betrachten Sie den folgenden Code: <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="So legen Sie die Schriftgröße im CSS-Stil fest">Im obigen Code ist p das übergeordnete Element, em das untergeordnete Element von p und strong das untergeordnete Element von em. Die Basis des em-Elements ist das p-Element, während die Basis des starken Elements das em-Element ist. Die Berechnungsergebnisse lauten wie folgt: </p><pre class="brush:css;toolbar:false">html { font-size: 10px; } p { font-size: 1.4rem; }</pre><p>Die laufenden Ergebnisse sind in der folgenden Abbildung dargestellt: </p> <p></p>🎜🎜Wenn in diesem Fall der mehrstufigen Verschachtelung ein bestimmtes Berechnungsergebnis keine ganze Zahl ist, rundet der Browser möglicherweise das Ergebnis Untergeordnete Elemente erben dann den gerundeten Wert. Bei einer sehr tiefen Verschachtelung weicht die Schriftgröße der darunter liegenden Ebene immer weiter vom tatsächlich berechneten Wert ab. Und da sich die Referenzbasis immer mit dem Element ändert, ist die Berechnung umso schwieriger, je tiefer die Verschachtelung ist. 🎜🎜In Anbetracht dessen verwendet eine neue relative Einheit rem (Abkürzung für root em) in CSS3 immer das Stammelement des Dokuments (d. h. das HTML-Element) als Referenz, um die Schriftgröße anderer Elemente festzulegen, d. h. 1rem entspricht dem Wert des Attributs „font-size“ des HTML-Elements. Betrachten Sie den folgenden Code: 🎜<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>

Das obige ist der detaillierte Inhalt vonSo legen Sie die Schriftgröße im CSS-Stil fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!