단일 @font-face 쿼리에서 여러 글꼴 가중치를 정의할 수 있나요?

단일 @font-face 쿼리로 여러 글꼴 두께를 정의할 수 있나요?

Klavika 글꼴은 다양한 두께와 모양으로 제공됩니다. 가중치를 지정하는 단일 @font-face 쿼리를 사용하여 이러한 항목을 CSS로 가져올 수 있습니까?

해결책:

@font-face의 다양한 기능을 소개합니다. 다양한 스타일과 두께를 단일 글꼴 모음 이름과 연결할 수 있습니다.

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");  /* Normal weight, normal style */
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype"); /* Normal weight, italic style */
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");  /* Bold weight, normal style */
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype"); /* Bold weight, italic style */
}

이제 글꼴 무게:bold 또는를 지정할 수 있습니다. 다양한 요소에 대한 글꼴 스타일:기울임꼴:

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

이 기능에 대한 자세한 내용은 공식 문서를 참조하세요.

예:

[펜 예시](https://codepen.io/anon/pen/EjxVqv)

위 내용은 단일 @font-face 쿼리에서 여러 글꼴 가중치를 정의할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!