PDFKit non visualizza caratteri personalizzati

Question

Sto provando a utilizzare un carattere personalizzato in un file PDF che ho generato da html con PDFKit nella mia app Rails. Ho aggiunto il tipo di carattere in ... app/attività/fonts/e incluso nel mio modello HTML:

css: 
    @font-face { 
    font-family: 'journal'; 
    src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.eot')}); 
    src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.woff')} format("woff")), 
     url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.ttf')}) format("truetype"); 
    } 

chiamavano nel css:

h1 {font-family: journal; } 

Answer 1

@font-face { 
    font-family: 'journalregular'; 
    src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.eot')}); 
} 

@font-face { 
    font-family: 'journalregular'; 
    src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.woff')}) format('woff'); 
} 

@font-face { 
    font-family: 'journalregular'; 
    src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.ttf')}) format('truetype'); 
} 

@font-face { 
    font-family: 'journalregular'; 
    src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.svg#journalregular')}) format('svg'); 
} 

@font-face { 
    font-family: 'journalregular'; 
    font-weight: normal; 
    font-style: normal; 
} 

che sembrava per risolvere il problema . Inoltre, avevo bisogno di chiamarlo:

h1 { font-family: 'journalregular'; } 

Answer 2

non usano ; a meno che non hai finito di dichiarare la regola. La formattazione CSS universale qui è:

selector { 
    propname: val1, val2, val3; 
} 

in modo da utilizzare , per più valori, e poi solo alla fine di un ;. Quello che hai scritto invece fa questo:

selector { 
    src: some value; 
    src: some *overwriting* value; 
} 

Basta dichiarare il vostro @ font-face utilizzando il formato normale e dovrebbe funzionare bene:

@font-face { 
    font-family: 'journal'; 
    src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.eot')}), 
     url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.woff')}) format("woff")), 
     url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.ttf')}) format("truetype"); 
    } 

(si noti che è Mancavano anche un ) per il caso "woff")

Tuttavia, se stai mirando ai browser moderni, non c'è più motivo di utilizzare eot. IE9 + e tutto il resto supporta woff bene. In effetti, WOFF è un wrapper opentype compresso; i browser che supportano opentype supportano anche WOFF, quindi provare a caricare sia WOFF e ttf o non ha senso: vedi http://caniuse.com/woff