Wie mehrere Font-Dateien für die gleiche Schriftart hinzufügen?
https://stackoverflow.com/questions/2436749
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich freue mich auf der MDC-Seite für die @ font-face CSS-Regel , aber ich habe nicht eine Sache. Ich habe separate Dateien für fett , kursiv und fett + kursiv . Wie kann ich einbetten alle drei Dateien in einem @font-face Regel? Zum Beispiel, wenn ich:
@font-face {
font-family: "DejaVu Sans";
src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
font-family: "DejaVu Sans";
font-weight: bold;
}
Der Browser nicht wissen, welche Schriftart fett verwendet werden (weil die Datei ist DejaVuSansBold.ttf), so dass es zu etwas ausfällt ich wahrscheinlich nicht will. Wie kann ich den Browser sagen, all die verschiedenen Varianten ich für eine bestimmte Schriftart haben?
Lösung
scheint die Lösung zu sein, mehr @font-face Regeln hinzufü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 es, Google Chrome nicht weiß, über das format("ttf") Argument, so dass Sie das überspringen möchten.
(Diese Antwort war richtig für die CSS 2 Spezifikation. CSS3 erlaubt nur für eine font-style eher als eine durch Kommata getrennte Liste.)
Andere Tipps
Wie von CSS3, hat die Spezifikation geändert, so dass nur eine einzige font-style. Eine durch Kommata getrennte Liste (pro CSS2) wird behandelt, als ob es normal und außer Kraft setzen alle früheren Eintrag (Standard) waren. Dies wird Schriftarten auf diese 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 werden kursiv wahrscheinlich ausreichend sein und schräge Regeln werden nicht nötig sein, wenn Sie darauf achten, zu definieren, je nachdem, was Sie es verwenden und Stick werden.
Wenn Sie Google Fonts verwenden würde ich folgendes vorschlagen.
Wenn Sie die Schriften wollen von Ihrem lokalen Host oder Server ausgeführt werden müssen Sie die Dateien zum Download bereit.
Statt die ttf-Pakete in den Download-Links herunterzuladen, verwenden Sie die Live-Schaltung die sie bieten, zum Beispiel:
http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic
Fügen Sie die URL in Ihrem Browser und Sie sollten eine font-face Erklärung ähnlich der ersten Antwort erhalten.
Öffnen Sie die URLs zur Verfügung gestellt, herunterladen und benennen Sie die Dateien.
Stick der aktualisierten font-face Erklärungen mit relativen Pfaden zu den woff Dateien in Ihrem CSS, und Sie sind fertig.
Schrift Variation haben ordnungsgemäß funktioniert, hatte ich die Reihenfolge der @ font-face in CSS rückgängig zu machen.
@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");
}
heute, 2017.12.17. Ich finde keine Beschreibung über Font-Eigenschaft Ordnung der Notwendigkeit in spec . Und ich Test in Chrom immer funktioniert, was die Ordnung 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');
}
/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# 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, dass nicht für mutige Variante ist es font-weight; für kursive Variante ist es font-style
