Jak dodać wiele plików czcionek dla tej samej czcionki?

Patrzę na stronę MDC dla reguły CSS @ font-face , ale nic nie rozumiem. Mam osobne pliki dla pogrubienia , kursywy i pogrubienia + kursywy . Jak osadzić wszystkie trzy pliki w jednej @font-faceregule? Na przykład, jeśli mam:

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

Przeglądarka nie będzie wiedziała, która czcionka ma być pogrubiona (ponieważ ten plik to DejaVuSansBold.ttf), więc domyślnie wybierze coś, czego prawdopodobnie nie chcę. Jak mogę powiedzieć przeglądarce, że mam różne warianty dla określonej czcionki?

Wydaje się, że rozwiązaniem jest dodanie wielu @font-facereguł, na przykład:

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

Nawiasem mówiąc, wygląda na to, że Google Chrome nie wie o tym format("ttf")argumencie, więc możesz to pominąć.

(Ta odpowiedź była poprawna dla CSS 2 specyfikacji. CSS3 pozwala tylko na jeden font-style zamiast listy oddzielonych przecinkami).

Począwszy od CSS3, specyfikacja uległa zmianie, dopuszczając tylko jeden font-style. Lista oddzielona przecinkami (według CSS2) będzie traktowana tak, jakby była normali zastąpi każdy wcześniejszy (domyślny) wpis. Spowoduje to, że zdefiniowane w ten sposób czcionki będą stale wyświetlane kursywą.

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

W większości przypadków kursywą będzie prawdopodobnie wystarczająca, a ukośne reguły nie będą konieczne, jeśli zadbasz o to, aby określić, którego z nich będziesz używać i trzymać się tego.

Aby wariacja czcionek działała poprawnie, musiałem odwrócić kolejność @ font-face w CSS.

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

obecnie, 17.12.2017. Nie znalazłem żadnego opisu na temat konieczności zamówienia właściwości-czcionki w specyfikacji . I testuję w chrome zawsze działa niezależnie od kolejności.

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

Jeśli używasz czcionek Google, sugeruję następujące.

Jeśli chcesz, aby czcionki działały z lokalnego hosta lub serwera, musisz pobrać pliki.

Zamiast pobierać pakiety ttf z linków do pobierania, użyj linku na żywo, który podają, na przykład:

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

Wklej adres URL w przeglądarce, a powinieneś otrzymać deklarację czcionki podobną do pierwszej odpowiedzi.

Otwórz podane adresy URL, pobierz pliki i zmień ich nazwę.

Przyklej zaktualizowane deklaracje czcionek za pomocą względnych ścieżek do plików woff w swoim CSS i gotowe.

/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# 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;
}

Nie zapominaj, że jest to odważny wariant font-weight; dla wariantu kursywy jest tofont-style