CSS에서 Font Awesome 아이콘의 글꼴 계열을 어떻게 올바르게 설정합니까?

Font Awesome Pseudo-Elements에서 올바른 글꼴 계열 결정

Font Awesome 5는 사용자에게 무료, 솔리드, 브랜드, 레귤러. 각 계열에는 아이콘을 올바르게 표시하기 위해 CSS 의사 요소에 특정 글꼴 계열 할당이 필요합니다.

사례 1: 브랜드 아이콘

다음과 같은 브랜드 아이콘을 사용할 때 https://fontawesome.com/icons/twitter?style=brands에서 사용할 수 있는 Twitter 아이콘, 올바른 글꼴 계열은 "Font Awesome 5 Brands"입니다. 브랜드 아이콘은 뚜렷한 시각적 스타일을 갖고 있으며 별도의 글꼴 모음에 포함되어 있기 때문입니다.

사례 2: 단색 아이콘

단색 아이콘을 표시하려고 할 때, https://fontawesome.com/icons/phone?style=solid에서 사용할 수 있는 전화 아이콘과 같은 올바른 글꼴 계열은 "Font"가 아니라는 점에 유의하는 것이 중요합니다. 어썸 5 솔리드." 솔리드 아이콘은 실제로 "Font Awesome 5 Free"인 일반 아이콘과 동일한 글꼴 계열에 속합니다.

올바른 접근 방식

특정 글꼴을 할당하는 대신- 각 아이콘 스타일의 글꼴 계열을 모두 한 줄에 쉼표로 구분하여 포함하는 것이 좋습니다. 이렇게 하면 브라우저가 아이콘 스타일에 따라 적절한 글꼴을 사용하게 됩니다.

.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";
}

이 접근 방식을 사용하면 브라우저는 브랜드 아이콘이 나타날 때 브랜드 글꼴 계열을 우선시하고 무료 글꼴 계열을 우선시합니다. 단색 또는 일반 아이콘.

위 내용은 CSS에서 Font Awesome 아이콘의 글꼴 계열을 어떻게 올바르게 설정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!