Was sind die am häufigsten verwendeten Einheiten für Schriftarten in CSS?

Üblicherweise verwendete Einheiten für Schriftarten in CSS sind: 1. px (Pixel), eine Einheit mit fester Größe; 2. em, eine relative Längeneinheit, die sich auf die Schriftgröße des übergeordneten Elements bezieht; , eine relative Längeneinheit, die relativ zur Schriftgröße des Stammknotens (oder HTML-Knotens) ist; 4, %, relative Längeneinheit, relativ zum übergeordneten Element.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3, dieser Artikel gilt für alle Computermarken.

Verwandte Empfehlungen: „CSS-Video-Tutorial“

1. Häufig verwendete Schriftarteinheiten in CSS sind px, em, rem und %

1. px (Pixel)

Der Name von Die px-Einheit ist Pixel, es handelt sich um eine Einheit mit fester Größe für den (Computer-/Mobiltelefon-)Bildschirm. Ein Pixel (1 Pixel) ist ein Punkt auf dem (Computer-/Mobiltelefon-)Bildschirm. die minimale Teilung der Bildschirmauflösung. Da es sich um eine Einheit mit fester Größe handelt, ist eine nur damit erstellte Webseite, die an einen großen Bildschirm (Computer) angepasst wird, auf einem kleinen Bildschirm (Mobiltelefon) sehr unfreundlich und kann den adaptiven Effekt nicht erzielen.

Beispiel:

nbsp;html>

 
  <meta> 
  <title>css px像素固定长度单位</title> 
  <style>
    body{background-color: #aaa;}
   .px{border:1px solid red;width:300px;height:100px;font-size:30px;}
  </style>
 
  
  <div>
   用px单位设置元素的宽高和文本的字体大小
  </div> 
 

Betriebsergebnisse:

2. em (relative Längeneinheit)

Die em-Einheit wird häufig verwendet, insbesondere im Ausland; der Name der em-Einheit ist die relative Längeneinheit. Wird verwendet, um die Schriftgröße des Texts relativ zur Schriftgröße des Texts im übergeordneten Elementobjekt festzulegen. Wenn niemand die Schriftgröße des Texts im aktuellen Objekt manuell festlegt, erfolgt die Festlegung relativ zur Standardschriftart des Browsers Größe (16px).

Beispiel:

nbsp;html>

 
  <meta> 
  <title>用em相对长度单位来设置文本的字体大小</title> 
  <style>
    body{background-color: #aaa;}
    .div{border:1px solid red;width:300px;height:100px;font-size:30px;}
    .em{font-size:0.5em;}/*30px x 0.5 = 15px*/
  </style>
 
  
  <div>
   <span>用em相对长度单位来设置文本的字体大小</span>
  </div> 
 

Ergebnis ausführen:

Erläuterung: Das obige Beispiel em ist relativ zum übergeordneten Element div. Die durch div festgelegte Schriftgröße beträgt 30 Pixel, daher beträgt die berechnete Schriftgröße von 0,5 em: 30 Pixel x 0,5 = 15px

3, rem (neue relative Längeneinheit in CSS3)

rem ist eine neue relative Längeneinheit in CSS3. Man kann sagen, dass sie die Mängel von em relativ zum übergeordneten Element behebt Element Die Schriftgröße muss neu berechnet werden, wenn sich die Schriftgröße des übergeordneten Elements ändert. Die Entstehung von rem kann solche Probleme nur relativ zum Stammknoten lösen, bei dem es sich um das HTML-Element handelt. Solange also die Schriftgröße im HTML-Tag festgelegt ist, basiert die Schriftgröße im Dokument auf diesem Referenzstandard, der im Allgemeinen für adaptives Layout verwendet wird.

nbsp;html>

 
  <meta> 
  <title>用css3新增的相对长度单位rem来设置文本的字体大小</title> 
  <style>
    body{background-color: #aaa;}
   .div{border:1px solid red;width:300px;height:100px;font-size:30px;}
   .rem{font-size:0.5rem;}/*16px x 0.5 = 8px*/ 
</style>
 
  
  <div>
   <span>用rem相对长度单位来设置文本的字体大小</span>
  </div> 
 

Hinweis: rem ist relativ zum Stammelement-HTML-Element. Die Standardschriftgröße des Browsers beträgt im Allgemeinen 16 Pixel. Die berechnete Schriftgröße aller 0,5 rem beträgt: 16 Pixel x 0,5 = 8 Pixel Das übergeordnete Element 30px spielt keine Rolle. Aber % kann in vielen Attributen verwendet werden, wie zum Beispiel: Breite, Höhe, Schriftgröße usw. Em ist die Einheit, die zum Festlegen der Schriftgröße (font-size) verwendet wird. Eigenschaften wie Breite und Höhe haben keine Em-Einheiten.

2. Die Differenz und Zusammenfassung von px, em, rem und %

px ist eine feste Längeneinheit und ändert sich nicht mit den Änderungen anderer Elemente;

em und % sind relativ zum übergeordneten Element Die Einheit ändert sich mit dem Attribut des übergeordneten Elements (Schriftgröße oder andere Attribute);
rem ist relativ zum Stammverzeichnis (HTML-Element), daher ändert es sich mit dem Attribut des HTML Elementänderungen (Schriftgröße);
px und % werden häufiger verwendet und können als Einheiten für mehr Attribute dienen, während em und rem Einheiten für die Schriftgröße sind und als Einheiten für Schriftgrößenattribute verwendet werden
Allgemein zum Beispiel: 1em = 1rem = 100 % = 16 px
Weitere Programmierkenntnisse finden Sie unter:
• Programmiervideo

  ! !

Das obige ist der detaillierte Inhalt vonWas sind die am häufigsten verwendeten Einheiten für Schriftarten in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!