PDFKit không hiển thị phông chữ tùy chỉnh

Question

Tôi đang cố gắng sử dụng phông chữ tùy chỉnh trong pdf tôi tạo từ html với PDFKit trong ứng dụng Rails của tôi. Tôi thêm phông chữ trong ... ứng dụng/tài sản/fonts/và đưa nó vào template html của tôi:

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

gọi nó trong 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; 
} 

Đó dường như để sửa chữa nó . Ngoài ra, tôi cần gọi nó:

h1 { font-family: 'journalregular'; } 

Answer 2

không sử dụng ; trừ khi bạn hoàn tất việc khai báo quy tắc. Các định dạng CSS phổ quát ở đây là:

selector { 
    propname: val1, val2, val3; 
} 

Vì vậy, bạn sử dụng , cho nhiều giá trị, và sau đó chỉ vào cuối, một ;. Những gì bạn đã viết thay vì thực hiện điều này:

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

Chỉ cần khai báo @ font-face của bạn bằng cách sử dụng định dạng thông thường và nó sẽ làm việc tốt:

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

(lưu ý rằng bạn cũng bị mất tích một ) cho trường hợp "woff")

Tuy nhiên, nếu bạn đang nhắm mục tiêu các trình duyệt hiện đại, không còn lý do gì để sử dụng eot nữa. IE9 + và mọi thứ khác hỗ trợ woff tốt. Trong thực tế, WOFF là một trình bao bọc opentype nén; các trình duyệt hỗ trợ opentype cũng hỗ trợ WOFF, do đó, cố gắng tải cả WOFF và ttf hoặc otf không có ý nghĩa: xem http://caniuse.com/woff