Detaillierte Erläuterung von Beispielen der Fonts-Eigenschaft in CSS

Unterschied zwischen serifenlosen und serifenlosen Schriftarten

Auf einem Computerbildschirm gelten serifenlose Schriftarten als leichter lesbar als serifenlose Schriftarten

CSS Schriftarten

In CSS gibt es zwei Arten von Schriftfamiliennamen:

Universelle Schriftfamilien – Kombinationen von Schriftsystemen, die ein ähnliches Aussehen haben (z. B. „Serif“ oder „Monospace“)

Spezifische Schriftfamilie – eine bestimmte Schriftfamilie (z. B. „Times“ oder „Courier“)

Schriftfamilie

Schriftfamilie Eigenschaften Einstellungen Die Schriftfamilie des Textes.

Das Attribut „font-family“ sollte mehrere Schriftartnamen als „Fallback“-Mechanismus festlegen. Wenn der Browser die erste Schriftart nicht unterstützt, versucht er es mit der nächsten Schriftart.

Hinweis: Wenn der Name der Schriftfamilie aus mehr als einem Zeichen besteht, muss er in Anführungszeichen gesetzt werden, z. B. Schriftfamilie: „宋体“.

Mehrere Schriftfamilien werden durch Komma getrennt angegeben:

Beispiele

p{font-family:"Times New Roman", Times, serif;}

Weitere häufig verwendete Schriftkombinationen finden Sie auf unserer WebsiteSicherheit Schriftkombinationen.

Schriftstil

wird hauptsächlich verwendet, um das Schriftstilattribut von kursivem Text anzugeben.

Dieses Attribut hat drei Werte:

Normal – zeigt den Text normal an

Kursiv – zeigt den Text kursiv an

Schräger Text – zeigt den Text seitlich an Kursiv (sehr ähnlich zu Kursivschrift, aber weniger unterstützt)

Instanzen

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Schriftgröße

Die Eigenschaft „font-size“ legt die Größe des Textes fest.

Die Möglichkeit, die Textgröße zu verwalten, ist im Webdesign sehr wichtig. Sie können die Schriftgröße jedoch nicht so anpassen, dass ein Absatz wie eine Überschrift oder eine Überschrift wie ein Absatz aussieht.

Achten Sie darauf, die richtigen HTML-Tags für

für Überschriften und

zu verwenden:

Schriftgrößenwerte Kann eine absolute oder relative Größe sein.

Absolute Größe:

Legt den Text auf eine bestimmte Größe fest.

Ermöglicht Benutzern nicht, die Textgröße in allen Browsern zu ändern.

Bestimmt die physische Größe der Ausgabe Absolute Größen sind nützlich, wenn

Relative Größe:

Größe relativ zu umgebenden Elementen festlegen

Dem Benutzer ermöglichen, die Textgröße im Browser zu ändern

Wenn Sie keine Schriftgröße angeben und die Standardgröße mit der eines normalen Textabsatzes übereinstimmt, nämlich 16 Pixel (16px=1em).

Schriftgröße in Pixel festlegen

Textgröße in Pixel festlegen, damit Sie die volle Kontrolle über die Textgröße haben:

Beispiel

h1 {font-size:40px;}h2 {font-size:30px;}p {font-size:14px;}

Das obige Beispiel Funktioniert: Textgröße ändern in Internet Explorer 9, Firefox, Chrome, Opera und Safari.

Hinweis: Das obige Beispiel kann nicht in Versionen vor IE9 ausgeführt werden.

Obwohl die Textgröße über das Zoom-Tool des Browsers angepasst werden kann, gilt diese Anpassung für die gesamte Seite und nicht nur für den Text

Verwenden Sie em, um die Schriftgröße festzulegen

Um das Problem zu vermeiden, dass die Textgröße im Internet Explorer nicht geändert werden kann, verwenden viele Entwickler EM-Einheiten anstelle von Pixeln.

EM-Größeneinheiten werden vom W3C empfohlen.

1em entspricht der aktuellen Schriftgröße. Die Standardtextgröße in Browsern beträgt 16 Pixel.

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

实例

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

使用百分比和EM组合

在所有浏览器的解决方案中，设置

元素的默认字体大小的是百分比：

实例

body {font-size:100%;}h1 {font-size:2.5em;}h2 {font-size:1.875em;}p {font-size:0.875em;}

我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费css在线视频教程

3. php.cn独孤九贱（2）－css视频教程

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Beispielen der Fonts-Eigenschaft in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!