Wie Sie mehrere font-Dateien für die gleiche schriftart?

Ich freu mich auf die MDC Seite für die @font-face CSS-Regelaber ich bekomme nicht eine Sache. Ich haben getrennte Dateien für FettKursiv und Fett + Kursiv. Wie kann ich die Betten alle drei Dateien in einem @font-face Regel? 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;
}

Kann der browser nicht wissen, welche schriftart, die verwendet werden für Fett (weil die Datei ist DejaVuSansBold.ttf), so wird es standardmäßig etwas, das ich wahrscheinlich nicht wollen. Wie kann ich dem browser mitteilen, die verschiedenen Varianten, die ich für eine bestimmte schriftart?

InformationsquelleAutor der Frage Felix | 2010-03-13

  1. 645

    Scheint die Lösung zu sein, fügen Sie mehrere @font-face Regeln, 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;
}

    Durch die Art und Weise, es scheint, als würde Google Chrome weiß nicht, über das format("ttf") argument, so möchten Sie vielleicht zu überspringen.

    (Diese Antwort war korrekt für den CSS 2 Spezifikation. CSS3 erlaubt nur eine schriftart-Stil eher als eine durch Kommas getrennte Liste.)

    InformationsquelleAutor der Antwort Felix

  2. 47

    Da von CSS3, die spec geändert hat, so dass für nur eine einzige font-style. Eine durch Komma getrennte Liste (pro CSS2) werden so behandelt, als wenn es normal und überschreiben früheren Eintrag (Standard). Damit werden Schriften in dieser Weise definiert, erscheinen Kursiv dauerhaft.

    @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, Kursiv wahrscheinlich ausreichend sein und schräger Regeln wird nicht nötig sein, wenn Sie kümmern, um zu definieren, je nachdem, was Sie verwenden und bleiben Sie dabei.

    InformationsquelleAutor der Antwort Josiah

  3. 12

    Wenn Sie Google Schriftarten würde ich Folgendes vorschlagen.

    Wenn Sie möchten, dass die Schriften laufen von Ihrem localhost oder server, die Sie benötigen, um die Dateien herunterzuladen.

    Statt dem herunterladen der ttf-Pakete im download-links, verwenden Sie den live-link zur Verfügung stellen, 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, und Sie sollten eine font-face-Deklaration ähnlich wie die erste Antwort.

    Öffnen Sie die URLs zur Verfügung gestellt, downloaden und umbenennen der Dateien.

    Stick die aktualisierten font-face-Deklarationen mit relativen Pfaden zu den woff-Dateien in CSS-und schon sind Sie fertig.

    InformationsquelleAutor der Antwort Dieter Gribnitz

  4. 6

    Haben font-Variante funktioniert, ich musste umkehren der Reihenfolge der @font-face in 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");
}

    InformationsquelleAutor der Antwort Cedric Simon

  5. 5

    heute 2017-12-17.
    Ich nicht finden, eine Beschreibung über die Schriftart-Eigenschaft, um die Notwendigkeit in Spezifikation.
    Und ich test in chrome funktioniert immer, unabhängig von der Reihenfolge ist.

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

    InformationsquelleAutor der Antwort xlaoyu.Lee

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

    InformationsquelleAutor der Antwort Jerry T

Schreibe einen Kommentar