PDFKit nie wyświetla niestandardowej czcionki

Question

Próbuję użyć niestandardowej czcionki w pliku PDF generowanym przez HTML z aplikacją PDFKit w mojej aplikacji Rails. Dodałem czcionkę w ... app/aktywów/czcionki/i włączyła ją w moim html szablonu:

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

nazwie go w 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; 
} 

To wydawało się to naprawić . Ponadto, musiałem to nazwać:

h1 { font-family: 'journalregular'; } 

Answer 2

nie używać ; chyba skończysz deklarując regułę. Formatowanie CSS uniwersalny tutaj jest:

selector { 
    propname: val1, val2, val3; 
} 

więc użyć , dla wielu wartości, a następnie dopiero na samym końcu do ;. To, co napisałem, a nie robi to:

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

Wystarczy zadeklarować @ font-face użyciu zwykłego formatu i powinno działać prawidłowo:

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

(pamiętać, że były też brakuje ) dla obudowa "woff")

Jednak jeśli kierujesz reklamy na nowoczesne przeglądarki, nie ma już powodu, aby używać eot. IE9 + i wszystko inne obsługuje się dobrze. W rzeczywistości WOFF jest skompresowanym opakowaniem typu opentype; przeglądarki obsługujące opentype również obsługują WOFF, więc próba załadowania obu WOFF i ttf lub otf nie ma sensu: zobacz http://caniuse.com/woff