CSS-Schrift
CSS Schriftattribut definiert die Schriftart, Größe, Fettigkeit, Stil (wie Kursiv) und Form (wie Kleinbuchstaben) des Textes.
CSS-Schriftfamilie
In CSS gibt es zwei verschiedene Arten von Schriftartennamen:
- Allgemeine Schriftartenserie - Eine Kombination von Schriftartensystemen mit ähnlichem Aussehen (z.B. "Serif" oder "Monospace")
- Spezifische Schriftartenserie - Eine spezifische Schriftartenserie (z.B. "Times" oder "Courier")
Neben verschiedenen spezifischen Schriftartenserien definiert CSS fünf allgemeine Schriftartenserien:
- Serif Schriftarten
- Sans-serif Schriftarten
- Monospace Schriftarten
- Kursivschrift
- Fantasy Schriftarten
Wenn Sie mehr über Schriftartenserien erfahren möchten, lesen Sie bitte CSS-Schriftfamilie.
Bezeichnende Schriftartenserie
Verwendung font-family-Eigenschaft Definieren Sie die Schriftartenserie des Textes.
Verwendung einer allgemeinen Schriftartenserie
Wenn Sie möchten, dass das Dokument eine sans-serif-Schriftart verwendet, aber nicht darauf achten, welche Schriftart es ist, ist dies eine angemessene Erklärung:
body {font-family: sans-serif;}
Der Benutzeragent wählt dann eine Schriftart aus der sans-serif-Schriftartenserie (z.B. Helvetica) und wendet sie auf das body-Element an. Da es eine Vererbung gibt, wird diese Schriftartenauswahl auch auf alle Elemente angewendet, die im body-Element enthalten sind, es sei denn, ein spezifischeres Selector überschreibt sie.
Bezeichnende Schriftartenserie
Neben der Verwendung einer allgemeinen Schriftartenserie können Sie auch die font-family-Eigenschaft verwenden, um spezifischere Schriftarten zu setzen.
Das folgende Beispiel setzt für alle h1-Elemente die Schriftart Georgia fest:
h1 {font-family: Georgia;}
Diese Regel kann gleichzeitig ein anderes Problem verursachen, falls der Benutzeragent die Schriftart Georgia nicht installiert hat, kann nur die Standardschrift des Benutzeragents zur Anzeige des h1-Elements verwendet werden.
Wir können dieses Problem durch die Kombination eines spezifischen Schriftartennamens und einer allgemeinen Schriftartenserie lösen:
h1 {font-family: Georgia,} serif;}
Wenn der Leser Georgia nicht installiert hat, aber Times Schriftart (eine Schriftart der Serifen-Schriftartenserie) installiert hat, könnte der Benutzeragent Times für das h1-Element verwenden. Obwohl Times und Georgia nicht vollständig übereinstimmen, sind sie mindestens ausreichend ähnlich.
Daher empfehlen wir, in allen font-family-Regeln eine allgemeine Schriftartenserie bereitzustellen. Dies bietet eine Ausweichmöglichkeit, falls der Benutzeragent keine spezifische Schriftart bereitstellen kann, die den Regeln entspricht, kann eine Kandidatenschriftart ausgewählt werden.
Wenn Sie mit Schriftarten sehr vertraut sind, können Sie auch eine Reihe ähnlicher Schriftarten für das angegebene Element angeben. Um dies zu tun, müssen Sie diese Schriftarten in der Prioritätsreihenfolge anordnen und mit Kommas verbinden:
p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
Georgia, 'New York', serif;}
Nach dieser Liste sucht der Benutzeragent in dieser Reihenfolge nach diesen Schriften. Wenn alle aufgelisteten Schriften nicht verfügbar sind, wird einfach eine verfügbare serif Schrift ausgewählt.
Verwendung von Anführungszeichen
Sie haben vielleicht bemerkt, dass in den obigen Beispielen Singlequotes verwendet werden. Nur wenn der Schriftname einen oder mehrere Leerzeichen enthält (z.B. New York) oder wenn der Schriftname Symbole wie # oder $ enthält, müssen Anführungszeichen im font-family-Ausdruck verwendet werden.
Single- oder Doublequotes sind beide akzeptabel. Aber wenn eine font-family Eigenschaft in einem HTML style Attribut platziert wird, muss die Art von Quote verwendet werden, die von der Eigenschaft selbst nicht verwendet wird:
<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,">... 'New York', serif;">...
Zeichenstil
font-style EigenschaftWird am häufigsten verwendet, um geneigten Text zu bestimmen.
Diese Eigenschaft hat drei Werte:
- normal - Text wird normal angezeigt
- kursiv - Text wird kursiv angezeigt
- geneigt - Text wird geneigt angezeigt
实例
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Unterschied zwischen italic und oblique
font-style ist sehr einfach: Es wird verwendet, um zwischen normalen Texten, kursiven Texten und geneigten Texten zu wählen. Einzig etwas komplexer ist die klare Unterscheidung zwischen kursiven und geneigten Texten.
Kursiv (italic) ist ein einfacher Zeichenstil, der die Struktur jedes Buchstaben leicht ändert, um das veränderte Aussehen widerzuspiegeln. Abweichend davon ist der geneigte Text eine geneigte Version des normalen senkrechten Textes.
Unter normalen Umständen sehen italic und oblique Text im Webbrowser genau gleich aus.
Zeichenstil
font-variant EigenschaftKleinbuchstaben können festgelegt werden.
Kleinbuchstaben sind nicht wie gewöhnliche Großbuchstaben, auch nicht wie Kleinbuchstaben, diese Buchstaben verwenden Großbuchstaben in verschiedenen Größen.
实例
p {font-variant:small-caps;}
Schriftfett
font-weight EigenschaftSetzen Sie die Dicke des Textes.
Verwenden Sie das Schlüsselwort bold, um den Text fett zu setzen.
Die Schlüsselwörter 100 ~ 900 weisen 9 Stufen der Fettung zu. Wenn ein Zeile diese Fettstufen enthält, werden diese Zahlen direkt auf die vorgegebenen Stufen abgebildet, 100 entspricht der feinsten Schriftform, 900 der fettesten Schriftform. Die Zahl 400 entspricht normal, während 700 bold entspricht.
Wenn das Fett von einem Element auf bolder gesetzt wird, setzt der Browser eine fettere Schriftart als die geerbte Wert. Im Gegensatz dazu führt der Schlüsselwort lighter dazu, dass die Fettung heruntergesetzt wird, anstatt erhöht zu werden.
实例
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
Schriftgröße
font-size EigenschaftSetzen Sie die Größe des Textes.
Die Fähigkeit, die Größe des Textes zu verwalten, ist im Bereich des Web-Designs wichtig. Aber Sie sollten die Größe des Textes nicht ändern, um Absätze wie Überschriften aussehen zu lassen oder Überschriften wie Absätze aussehen zu lassen.
Verwenden Sie immer die richtigen HTML-Überschriften, z.B. <h1> - <h6> zum Markieren von Überschriften, <p> zum Markieren von Absätzen.
Der Wert von font-size kann absolut oder relativ sein.
Absolute Werte:
- Setzen Sie den Text auf eine bestimmte Größe
- Ermöglichen Sie den Benutzern nicht, die Textgröße in allen Browsern zu ändern (nicht förderlich für die Benutzeroberfläche)
- Absolute Größe ist nützlich, wenn die physische Ausgabegröße festgelegt ist
Relative Größe:
- Setzen Sie die Größe relativ zu den umgebenden Elementen
- Ermöglichen Sie den Benutzern, die Textgröße im Browser zu ändern
Hinweis:Wenn Sie die Schriftgröße nicht festlegen, beträgt die Standardgröße für regulären Text (z.B. Absätze) 16 Pixel (16px = 1em).
Verwenden Sie Pixel, um die Schriftgröße zu setzen
Durch die Angabe der Schriftgröße in Pixeln kann die Schriftgröße vollständig kontrolliert werden:
实例
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
In Firefox, Chrome und Safari kann die Schriftgröße der obigen Beispiele angepasst werden, aber nicht im Internet Explorer.
Obwohl die Schriftgröße über das Zoom-Tool des Browsers angepasst werden kann, betrifft dies tatsächlich die gesamte Seite und nicht nur den Text.
Verwenden Sie em, um die Schriftgröße zu setzen
Um Probleme mit nicht einstellbaren Texten im Internet Explorer zu vermeiden, verwenden viele Entwickler Einheiten in em anstelle von Pixeln.
W3C 推荐使用 em 尺寸单位。
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为 em：pixels/16=em
（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）
实例
h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
在上面的例子中，以 em 为单位的文本大小与前一个例子中以像素计的文本是相同的。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。
不幸的是，在 IE 中仍存在问题。在重设文本大小时，会比正常的尺寸更大或更小。
结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：
实例
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。
CSS 字体实例：
CSS 字体属性
| 属性 | 描述 |
|---|---|
| font | 简写属性。作用是将所有针对字体的属性设置在一个声明中。 |
| font-family | Die Schriftfamilie einstellen. |
| font-size | Die Schriftgröße einstellen. |
| font-size-adjust | Intelligente Skalierung der Ersatzschrift, wenn die bevorzugte Schrift nicht verfügbar ist. (Diese Eigenschaft wurde in CSS2.1 entfernt.) |
| font-stretch | Die Schrift horizontal strecken. (Diese Eigenschaft wurde in CSS2.1 entfernt.) |
| font-style | Den Schriftstil einstellen. |
| font-variant | Text in Kleinbuchstaben oder Normalgröße anzeigen. |
| font-weight | Den Schriftgrad einstellen. |
