Come aggiungere più file di font per lo stesso font?

454

Sto guardando la pagina MDC per la regola CSS @ font-face , ma non capisco nulla. Ho file separati per grassetto , corsivo e grassetto + corsivo . Come posso incorporare tutti e tre i file in una @font-faceregola? Ad esempio, se ho:

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

Il browser non saprà quale tipo di carattere utilizzare in grassetto (perché quel file è DejaVuSansBold.ttf), quindi sarà predefinito qualcosa che probabilmente non voglio. Come posso dire al browser tutte le diverse varianti che ho per un determinato font?

fonts  css  font-face 
— Felix
fonte
Come estensione alla domanda se usiamo questi caratteri negli editor WYSIWYG come TinyMCE, abbiamo ancora bisogno del grassetto corsivo? Nonostante il TinyMCE abbia dei coglioni per fare Bold Italics? La mia ipotesi è una risposta SÌ - perché all'interno cercano questi file?
— Nishant,
possibile duplicato di Come unire i caratteri?
— user2284570,

Risposte:

749

La soluzione sembra essere l'aggiunta di più @font-faceregole, ad esempio:

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

A proposito, sembra che Google Chrome non sia a conoscenza format("ttf")dell'argomento, quindi potresti volerlo saltare.

(Questa risposta era corretta per la specifica CSS 2. CSS3 consente solo uno stile di carattere anziché un elenco separato da virgole.)

— Felix
fonte
130
L'ordine è importante, lo stile grassetto / corsivo deve arrivare per ultimo.
— The Who,
8
Vale la pena notare che questo non funziona in IE8 (e sotto), anche se si utilizza un EOT. IE scaricherà il carattere tipografico alternativo, ma non lo userà, invece fingerà in grassetto / corsivo il carattere tipografico normale. Inoltre, Chrome 11 sembra non riuscire a rendere un carattere tipografico sia grassetto che corsivo
— JaffaTheCake
2
Questo esempio funziona perfettamente per i caratteri che hanno un file TTF separato per grassetto e corsivo. Ma cosa succede se l'intero carattere si trova in un file .ttf e vuoi usare il grassetto, come funziona?
2
Questo articolo fa un ottimo lavoro spiegando perché funziona. Estratto chiave: "Nota che la proprietà della famiglia di caratteri ha lo stesso nome per tutti e quattro i caratteri. Inoltre, lo stile e lo spessore del carattere corrispondono a quello del carattere. Nota: il peso normale deve essere in cima all'elenco! Non abbiamo riscontrato che l'ordine sia importante ".
— JD Smith,
13
Ho avuto problemi con questo frammento sul browser incorporato Android 4.4. Finita la modifica, sembrava font-style: italic, oblique;solo font-style: italic;sistemare tutto.
— Xavi,
59

A partire da CSS3, le specifiche sono cambiate, consentendo solo una singola font-style. Un elenco separato da virgole (per CSS2) verrà trattato come se fosse normale sovrascriverà qualsiasi voce precedente (predefinita). Questo farà apparire i caratteri così definiti in corsivo in modo permanente.

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

Nella maggior parte dei casi, il corsivo sarà probabilmente sufficiente e le regole oblique non saranno necessarie se ti prendi cura di definire qualunque cosa userai e ti atterrai.

— Josiah
fonte
Credo che il terzo e il quarto carattere abbiano un nome sbagliato, dovrebbero avere "Corsivo" invece di "Obliquo".
— Nathan Merrill,
3
@NathanMerrill come da OP: I have separate files for bold, italic and bold + italic- quindi ci sono tre file diversi. Questa risposta corregge quella accettata in quanto font-style: italic, oblique;non è più valida, ma anche quella risposta utilizzava lo stesso file in corsivo e obliquo. Tuttavia, vale la pena sottolineare che il file è condiviso in due casi.
— Silly Freak
18

Per far funzionare correttamente la variazione dei caratteri, ho dovuto invertire l'ordine di @ font-face nei 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");
}
— Cedric Simon
fonte
Molto utile. +1
— Mr. Polywhirl,
Cosa intendi con "inverti l'ordine" ?
— Nyxynyx
15

al giorno d'oggi, 2017/12/17. Non trovo alcuna descrizione sulla necessità di Font-property-order nelle specifiche . E testare in Chrome funziona sempre qualunque sia l'ordine.

@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');
}
— xlaoyu.Lee
fonte
13

Se si utilizzano i caratteri Google, suggerirei quanto segue.

Se si desidera che i caratteri vengano eseguiti dal proprio host locale o server, è necessario scaricare i file.

Invece di scaricare i pacchetti ttf nei collegamenti di download, utilizzare il collegamento live che forniscono, ad esempio:

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

Incolla l'URL nel tuo browser e dovresti ottenere una dichiarazione di tipo di carattere simile alla prima risposta.

Apri gli URL forniti, scarica e rinomina i file.

Attacca le dichiarazioni di font-face aggiornate con percorsi relativi ai file woff nel tuo CSS e il gioco è fatto.

— Dieter Gribnitz
fonte
3 
/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# 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;
}
— Jerry T
fonte
1

Non dimenticare che per la variante in grassetto, lo è font-weight; per la variante in corsivo, lo èfont-style

— Ooker
fonte
Non molto legato al problema e @font-face, quindi, sto cercando di sottovalutare questa risposta (ma non posso, non ho abbastanza reputazione)
— FryingggPannn
sì, non è una risposta alla domanda, ma una buona cosa da ricordare quando si applicano le risposte. Il problema è che la sezione dei commenti della risposta ne ha già molti, quindi questo suggerimento sarebbe sepolto
— Ooker
Ok allora non lo sapevo
— FryingggPannn il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.