같은 글꼴에 여러 글꼴 파일을 추가하는 방법은 무엇입니까?

@ font-face CSS rule 에 대한 MDC 페이지를 찾고 있지만 한 가지도 얻지 못했습니다. 굵게 , 기울임 꼴 및 굵게 + 기울임 꼴로 별도의 파일이 있습니다 . 세 가지 파일을 모두 하나의 @font-face규칙으로 포함하려면 어떻게해야합니까? 예를 들어 내가 가진 경우 :

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

브라우저는 굵게 사용될 글꼴을 알지 못하므로 (파일은 DejaVuSansBold.ttf이므로) 원하지 않는 것으로 기본 설정됩니다. 브라우저에 특정 글꼴에 대한 다양한 변형을 모두 알리려면 어떻게해야합니까?

해결책은 다음과 같은 여러 @font-face규칙 을 추가하는 것 같습니다 .

@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;
}

그건 그렇고, 구글 크롬이 format("ttf")인수 에 대해 알지 못하는 것처럼 보이 므로 건너 뛸 수 있습니다.

(이 답변은 CSS 2 사양 에 맞습니다 . CSS3 은 쉼표로 구분 된 목록이 아닌 하나의 글꼴 스타일 만 허용합니다.)

CSS3부터 사양이 변경되어 단일을 허용합니다 font-style. 쉼표로 구분 된 목록 (CSS2 당)은 마치 목록 인 것처럼 취급되며 normal이전 (기본) 항목보다 우선합니다. 이렇게하면 이런 식으로 정의 된 글꼴이 기울임 꼴로 영구적으로 나타납니다.

@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;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: oblique;
}

대부분의 경우 기울임 꼴이면 충분할 것이며, 사용하고 고수 할 것을 정의하는 경우주의를 기울여야합니다.

글꼴 변형이 올바르게 작동하려면 CSS에서 @ font-face의 순서를 바꿔야했습니다.

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}

요즘 2017-12-17. spec 에서 font-property-order의 필요성에 대한 설명을 찾지 못했습니다 . 그리고 크롬 테스트는 항상 순서에 관계없이 작동합니다.

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

Google 글꼴을 사용하는 경우 다음을 제안합니다.

로컬 호스트 또는 서버에서 글꼴을 실행하려면 파일을 다운로드해야합니다.

다운로드 링크에서 ttf 패키지를 다운로드하는 대신 다음과 같이 제공하는 라이브 링크를 사용하십시오.

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic

브라우저에 URL을 붙여 넣으면 첫 번째 답변과 비슷한 글꼴로 선언해야합니다.

제공된 URL을 열고 파일을 다운로드하고 이름을 바꿉니다.

CSS의 woff 파일에 대한 상대 경로를 사용하여 업데이트 된 글꼴 선언을 작성하면 완료됩니다.

/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'), /* Duplicated name with hyphen */
        url('dejavu/DejaVuSans.ttf') 
        format('truetype');
}
/*bold version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Bold.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Bold.ttf') 
        format('truetype');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Oblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Oblique.ttf') 
        format('truetype');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-BoldOblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-BoldOblique.ttf') 
        format('truetype');
    font-weight: bold;
    font-style: italic;
}

대담한 변형에 대해서는 잊지 마십시오 font-weight. 기울임 꼴 변형의 경우font-style