Wie stelle ich Schriftfamilien für Font Awesome-Symbole in CSS richtig ein?

Bestimmen der richtigen Schriftfamilie in Font Awesome-Pseudoelementen

Font Awesome 5 bietet Benutzern eine Reihe von Symbolfamilien, darunter kostenlose, Solid, Marken und Regular. Jede Familie erfordert eine bestimmte Schriftfamilienzuweisung in CSS-Pseudoelementen, um Symbole korrekt anzuzeigen.

Fall 1: Markensymbol

Bei Verwendung eines Markensymbols, z Das Twitter-Symbol ist unter https://fontawesome.com/icons/twitter?style=brands verfügbar. Die korrekte Schriftfamilie ist „Font Awesome 5 Brands“. Dies liegt daran, dass Markensymbole einen eigenen visuellen Stil haben und in einer separaten Schriftfamilie untergebracht sind.

Fall 2: Solides Symbol

Beim Versuch, ein solides Symbol anzuzeigen, B. das Telefonsymbol, das unter https://fontawesome.com/icons/phone?style=solid verfügbar ist, ist es wichtig zu beachten, dass die richtige Schriftfamilie nicht „Font Awesome 5 Solid“ ist. Solide Symbole gehören tatsächlich zur gleichen Schriftfamilie wie normale Symbole, nämlich „Font Awesome 5 Free“.

Der richtige Ansatz

Anstatt bestimmte Schriftarten zuzuweisen- Für jeden Symbolstil wird empfohlen, alle erforderlichen Schriftfamilien durch Kommas getrennt in einer einzigen Zeile anzugeben. Dadurch wird sichergestellt, dass der Browser die passende Schriftart basierend auf dem Stil des Symbols verwendet:

.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free";
}

Bei diesem Ansatz priorisiert der Browser die Markenschriftfamilie, wenn er auf Markensymbole trifft, und die kostenlose Schriftfamilie, wenn er darauf trifft feste oder normale Symbole.

Das obige ist der detaillierte Inhalt vonWie stelle ich Schriftfamilien für Font Awesome-Symbole in CSS richtig ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!