CSS에서 @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;
}

이 코드는 글꼴 모음을 "DejaVu Sans"로 설정하고 굵게 및/또는 기울임꼴 스타일을 적용할 때 브라우저가 적절한 글꼴 변형을 로드합니다.

format("ttf") 인수는 선택 사항이며 모든 브라우저에서 필요하지 않을 수도 있습니다. 또한 CSS3에서는 글꼴 스타일을 지정하기 위한 단순화된 구문을 도입했습니다. 여러 @font-face 규칙을 사용하는 대신 단일 규칙에서 쉼표로 구분된 글꼴 두께 및 글꼴 스타일 값 목록을 사용할 수 있습니다.

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

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