단일 @font-face 규칙에 여러 글꼴 변형(굵게, 기울임꼴)을 어떻게 포함할 수 있습니까?

단일 @font-face 규칙의 여러 글꼴 변형

CSS에서 @font-face 규칙을 사용하면 웹 페이지에 사용자 정의 글꼴을 삽입할 수 있습니다. 그러나 여러 글꼴 변형(예: 굵게, 기울임꼴, 굵은 기울임꼴)으로 작업하는 경우 단일 규칙에서 이를 지정하는 방법이 불분명할 수 있습니다.

동일한 글꼴에 대해 여러 글꼴 파일을 포함하려면 다음을 수행하세요. 여러 @font-face 규칙을 사용하세요. 예를 들어 DejaVu Sans 볼드체, 이탤릭체 및 굵은 이탤릭체에 대한 별도의 파일이 있는 경우:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

위 예에서 각 @font-face 규칙은 서로 다른 글꼴 변형을 지정합니다. 웹 브라우저가 글꼴 스타일 선언(예: 글꼴 두께: 굵은 글꼴)을 발견하면 해당 글꼴 파일을 로드하고 적절한 스타일을 적용합니다.

Chrome은 형식("ttf)을 인식하지 못합니다. ") 인수는 위 예에서 사용되므로 생략할 수 있습니다. 또한 CSS3에서는 예제에 표시된 것처럼 쉼표로 구분된 목록이 아닌 @font-face 규칙당 하나의 글꼴 스타일 선언만 허용합니다.

위 내용은 단일 @font-face 규칙에 여러 글꼴 변형(굵게, 기울임꼴)을 어떻게 포함할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!