Leitfaden zur Auswahl von CSS-Schriftarteneigenschaften: Korrekte Verwendung von Schriftfamilie und Schriftgröße-CSS-Tutorial-php.cn

Leitfaden zur Auswahl von CSS-Schriftarteneigenschaften: Korrekte Verwendung von Schriftfamilie und Schriftgröße

WBOY

Freigeben： 2023-10-20 10:09:26

Original

1861 Leute haben es durchsucht

CSS 字体属性选择指南：font-family 和 font-size 的正确使用

Leitfaden zur Auswahl von CSS-Schriftartattributen: Die korrekte Verwendung von Schriftfamilie und Schriftgröße erfordert spezifische Codebeispiele

Einführung:

Beim Webdesign ist die Schriftauswahl ein wichtiger Aspekt. Eine geeignete Schriftart kann die Lesbarkeit und Ästhetik einer Webseite verbessern. In CSS können wir Schriftstil und -größe über die Eigenschaften „font-family“ und „font-size“ steuern. Allerdings ist die korrekte Nutzung dieser beiden Eigenschaften eine anspruchsvolle Aufgabe. Dieser Artikel zeigt Ihnen, wie Sie den richtigen Schriftstil und die richtige Schriftgröße auswählen, und stellt einige spezifische Codebeispiele bereit.

1. Anleitung zur Auswahl von Schriftarten für Schriftarten:

Verwenden Sie universelle Schriftartenfamilien:

Bei der Auswahl von Schriftarten sollten Sie der Verwendung universeller Schriftarten Vorrang einräumen. Wie „Serif“, „Sans-Serif“, „Monospace“ usw. Diese Schriftfamilien definieren den Gesamtstil einer Schriftart und können auf verschiedenen Betriebssystemen und Geräten konsistente Effekte erzielen. Hier sind einige gängige generische Schriftfamilien:

body {
  font-family: serif;
}

h1 {
  font-family: sans-serif;
}

code {
  font-family: monospace;
}

Nach dem Login kopieren

Geben Sie einen bestimmten Schriftnamen an:

Wenn Sie einen bestimmten Schriftstil verwenden müssen, können Sie dies tun, indem Sie den Namen der Schriftart angeben. Versuchen Sie, Schriftarten auszuwählen, die standardmäßig auf dem System installiert sind. Wenn die Schriftart auf dem System des Benutzers nicht vorhanden ist, verwendet der Browser stattdessen eine Ersatzschriftart. Hier ist ein Beispiel für die Angabe eines Schriftartnamens:

h1 {
  font-family: Arial, Helvetica, sans-serif;
}

Nach dem Login kopieren

Verwendung einer benutzerdefinierten Schriftart:

Wenn Sie eine benutzerdefinierte Schriftart auf Ihrer Webseite verwenden möchten, können Sie die Schriftartdatei über @font-face laden Regel . Platzieren Sie die Schriftartdatei auf dem Server und referenzieren Sie sie mithilfe eines relativen oder absoluten Pfads. Hier ist ein Beispiel für das Laden einer benutzerdefinierten Schriftart: @font-face 规则来加载字体文件。将字体文件放在服务器上，并使用相对或绝对路径来引用它。以下是一个加载自定义字体的示例：

@font-face {
  font-family: "MyFont";
  src: url("myfont.ttf");
}

h1 {
  font-family: "MyFont", sans-serif;
}

Nach dem Login kopieren

二、font-size 字体大小选择指南：

使用相对单位：

在设置字体大小时，使用相对单位是一个良好的实践。相对单位可以根据用户的设备和偏好来自动调整字体大小。以下是一些常见的相对单位：

em：相对于父元素的字体大小
rem：相对于根元素（通常是 <html> 元素）的字体大小
%：相对于父元素的百分比

body {
  font-size: 1em;
}

h1 {
  font-size: 2em;
}

p {
  font-size: 120%;
}

Nach dem Login kopieren

使用绝对单位：

在某些情况下，您可能需要使用固定的字体大小。在这种情况下，可以使用绝对单位，如 px，pt 或 rem

h1 {
  font-size: 24px;
}

p {
  font-size: 16pt;
}

Nach dem Login kopieren

2. Schriftgröße Leitfaden zur Auswahl der Schriftgröße:

Beim Festlegen von Schriftgrößen empfiehlt es sich, relative Einheiten zu verwenden. Relative Einheiten passen die Schriftgröße automatisch an das Gerät und die Vorlieben des Benutzers an. Hier sind einige gängige relative Einheiten:

em

rem

&lt ;html>

%

h1 {
  font-size: 24px;
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 18px;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 16px;
  }
}

Nach dem Login kopieren

🎜🎜Verwenden Sie absolute Einheiten: 🎜🎜🎜In einigen Fällen möchten Sie möglicherweise verwenden eine feste Schriftgröße. In diesem Fall können Sie absolute Einheiten wie px, pt oder rem verwenden. Hier ist ein Beispiel mit absoluten Einheiten: 🎜rrreee🎜🎜Responsive Schriftgrößen: 🎜🎜🎜Um optimale Schriftgrößen auf verschiedenen Bildschirmgrößen und Geräten zu erreichen, können Sie CSS-Medienabfragen und Eigenschafteninterpolation verwenden. Beispielsweise können Schriftgrößen automatisch an die Bildschirmbreite angepasst werden. Hier ist ein Beispiel für responsive Schriftgrößen: 🎜rrreee🎜 Fazit: 🎜🎜 Die richtige Wahl des Schriftstils und der Schriftgröße ist eine wichtige Aufgabe im Webdesign. Durch die Verwendung geeigneter Schriftstile und relativer Einheiten können Sie die Lesbarkeit und Ästhetik Ihrer Webseiten sicherstellen. Gleichzeitig können Sie durch die Angabe von Schriftartnamen und das Laden benutzerdefinierter Schriftarten personalisiertere und einzigartigere Designeffekte erzielen. Wir hoffen, dass Ihnen die Richtlinien und Beispiele in diesem Artikel dabei helfen, Schriftstile und Schriftgrößen richtig auszuwählen und zu verwenden. 🎜

Das obige ist der detaillierte Inhalt vonLeitfaden zur Auswahl von CSS-Schriftarteneigenschaften: Korrekte Verwendung von Schriftfamilie und Schriftgröße. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!