PDFKit не отображает пользовательский шрифт

Question

Я пытаюсь использовать собственный шрифт в pdf, который я генерирую из html с помощью PDFKit в моем приложении Rails. Я добавил шрифт в ... приложение/активов/шрифтов/и включить его в моем шаблоне 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"); 
    } 

назвал его в 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; 
} 

Это, казалось, это исправить , Кроме того, мне нужно было назвать:

h1 { font-family: 'journalregular'; } 

Answer 2

не используют ;, если вы не сделали объявляя правила. Универсальный CSS форматирование здесь:

selector { 
    propname: val1, val2, val3; 
} 

Таким образом, вы используете , для нескольких значений, а затем только в самом конце в ;. То, что вы написали вместо этого делает:

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

Просто объявить @ шрифта лицом с использованием стандартного формата, и он должен работать нормально:

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

(обратите внимание, что вы также пропуская ни ) для случай «woff»)

Однако, если вы нацеливаете современные браузеры, нет причин использовать eot. IE9 + и все остальное поддерживает woff просто отлично. Фактически, WOFF представляет собой сжатую оболочку opentype; браузеры, поддерживающие opentype, также поддерживают WOFF, поэтому попытка загрузить как WOFF , так и ttf или otf не имеет смысла: см. http://caniuse.com/woff