PDFKit zeigt keine benutzerdefinierte Schriftart

Question

Ich versuche, eine benutzerdefinierte Schriftart in einem PDF zu verwenden, das ich von HTML mit PDFKit in meiner Rails App erzeuge. Ich habe die Schrift in ... app/assets/fonts/und enthalten es in meinem HTML-Template:

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

es in der CSS genannt:

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

, dass es schien zu beheben . Außerdem brauchte ich es zu nennen:

h1 { font-family: 'journalregular'; } 

Answer 2

nicht ; verwenden, wenn Sie die Regel fertig sind deklarieren. Die universelle CSS-Formatierung hier:

selector { 
    propname: val1, val2, val3; 
} 

So verwenden Sie , für mehrere Werte, und dann erst ganz ein ; beenden. Was haben Sie diese stattdessen tut geschrieben:

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

erklären Sie Ihre @ font-face den regulären Format und es sollte funktionieren:

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

(beachten Sie, dass Sie auch ein ) fehlten für der "woff" -Fall)

Wenn Sie jedoch auf moderne Browser abzielen, gibt es keinen Grund mehr, eot zu verwenden. IE9 + und alles andere unterstützt woff ganz gut. Tatsächlich ist WOFF ein komprimierter Opentyp-Wrapper; Browser, die opentype unterstützen, unterstützen auch WOFF, weshalb es keinen Sinn macht, sowohl WOFF als auch ttf oder otf zu laden: siehe http://caniuse.com/woff