Wie füge ich mehrere Schriftdateien für dieselbe Schriftart hinzu?

Ich suche auf der MDC-Seite nach der @ font-face-CSS-Regel , aber eines verstehe ich nicht. Ich habe separate Dateien für Fett , Kursiv und Fett + Kursiv . Wie kann ich alle drei Dateien in eine @font-faceRegel einbetten ? Zum Beispiel, wenn ich habe:

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

Der Browser weiß nicht, welche Schriftart für Fettdruck verwendet werden soll (da diese Datei DejaVuSansBold.ttf ist), daher wird standardmäßig etwas verwendet, das ich wahrscheinlich nicht möchte. Wie kann ich dem Browser alle verschiedenen Varianten mitteilen, die ich für eine bestimmte Schriftart habe?

Die Lösung scheint darin zu bestehen, mehrere @font-faceRegeln hinzuzufügen , zum Beispiel:

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

Übrigens scheint Google Chrome nichts über das format("ttf")Argument zu wissen. Vielleicht möchten Sie das überspringen.

(Diese Antwort war für die CSS 2- Spezifikation korrekt . CSS3 erlaubt nur einen Schriftstil anstelle einer durch Kommas getrennten Liste.)

Ab CSS3 hat sich die Spezifikation geändert und nur eine einzige zugelassen font-style. Eine durch Kommas getrennte Liste (gemäß CSS2) wird wie behandelt behandelt normalund überschreibt alle früheren (Standard-) Einträge. Dadurch werden auf diese Weise definierte Schriftarten dauerhaft kursiv angezeigt.

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

In den meisten Fällen ist Kursivschrift wahrscheinlich ausreichend und schräge Regeln sind nicht erforderlich, wenn Sie sorgfältig definieren, welche Sie verwenden, und sich daran halten.

Damit die Schriftvariation korrekt funktioniert, musste ich die Reihenfolge von @ font-face in CSS umkehren.

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

heutzutage, 17.12.2017. Ich finde keine Beschreibung der Notwendigkeit von Font-Property-Order in der Spezifikation . Und ich teste in Chrom funktioniert immer in welcher Reihenfolge auch immer.

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

Wenn Sie Google-Schriftarten verwenden, würde ich Folgendes vorschlagen.

Wenn Sie möchten, dass die Schriftarten von Ihrem lokalen Host oder Server ausgeführt werden, müssen Sie die Dateien herunterladen.

Anstatt die ttf-Pakete in den Download-Links herunterzuladen, verwenden Sie den von ihnen bereitgestellten Live-Link, zum Beispiel:

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

Fügen Sie die URL in Ihren Browser ein und Sie sollten eine Schriftartenerklärung erhalten, die der ersten Antwort ähnelt.

Öffnen Sie die angegebenen URLs, laden Sie die Dateien herunter und benennen Sie sie um.

Kleben Sie die aktualisierten Schriftartendeklarationen mit relativen Pfaden zu den woff-Dateien in Ihrem CSS, und Sie sind fertig.

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

Vergessen Sie nicht, dass es für eine mutige Variante ist font-weight; für kursive Variante ist esfont-style