wkhtmltopdf를 사용하여 HTML에서 Google 웹 글꼴 및 PDF 생성

wkhtmltopdf를 사용하여 HTML에서 Google 웹 글꼴 및 PDF 생성

---

wkhtmltopdf 를 사용하여 HTML 파일을 PDF 형식으로 변환하고 있습니다. 놀랍도록 좋은 결과를 제공하여 WebKit이 수행하는 것과 똑같이 PDF를 렌더링합니다.

저는 Google Web Fonts 를 사용하여 사용자가 편집 한 문서의 모양을 사용자 정의하여 몇 가지 글꼴 중에서 선택할 수있는 가능성을 제공합니다. 또한 브라우저 에서도 완벽하게 작동 합니다 .

문제는 이러한 HTML 파일을 wkhtmltopdf를 사용하여 PDF로 변환 할 때 Google 글꼴이 작동하지 않는다는 것입니다. 다른 사람들도 같은 문제 가 있다는 것을 읽었습니다 .

누구든지이 문제를 해결하도록 도와 주시겠습니까?

편집 : CSS에서 직접 @ font-face를 선언해도 작동하지 않습니다.

---

HTML을 PDF로 변환하려면 글꼴 wkhtmltopdf을 사용하지 마십시오 woff. with encode truetype형식을 사용하십시오 .Google Web Fontsbase64

최근에 Google Web Fonts의 Google 웹 폰트를 사용해 보았습니다. 브라우저에서는 올바르게 표시되지만 HTML을 PDF로 변환 한 후 표시되지 않습니다.

웹을 광범위하게 검색 한 후 마침내 글꼴을 base64형식 으로 인코딩하는 도구를 찾았고 @font-face.

여기 에서 솔루션을 읽어보십시오 .

---

간단한 솔루션 : Base64로 글꼴을 인코딩하고 CSS에 포함 :

@font-face {
    font-family: 'OpenSans';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}

FontSquirrel은 Webfont Generator 의 고급 옵션을 통해이를 수행 할 수 있습니다 . 이 도구를 사용하여 Google 및 기타 글꼴을 인코딩 할 수 있습니다 .

나는이와 솔루션을 사용했습니다 pdfkit그리고 wicked_pdf난이 기본으로 작동합니다 가정 때문에, wkhtmltopdf을 통해 작업을 wkhtmltopdf뿐만 아니라.

---

나는이 같은 문제가 있었고 글꼴을 다운로드 하고이 글꼴 얼굴 선언을 사용하여 웹 서버의 로컬 파일에서 실행하여 해결했습니다.

@font-face {
    font-family: 'PT Sans';
    src: url( '/public/inc/fonts/PTS55F-webfont.eot');
    src: url( '/public/inc/fonts/PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
         url( '/public/inc/fonts/PTS55F-webfont.woff') format('woff'),
         url( '/public/inc/fonts/PTS55F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

이 글꼴은 Font Squirrel 에서 찾을 수 있지만 마일리지는 다를 수 있습니다.

나는 Google의 글꼴에서 발생하는 일은이 브라우저가 원하는 형식 만로드하려고한다는 것입니다. WebKit의 경우에는 전혀 문제가 없습니다. 그러나 wkhtmltopdfPDF에 woff 글꼴을 포함 할 수 없으므로 기본적으로 sans-serif로 돌아갑니다. 이들 모두를 선언하면 PDF가 실제로 사용하는 TrueType 글꼴이 포함됩니다.

또한 글꼴 패밀리 CSS 정의에서 첫 번째로 사용할 글꼴을 정의해야합니다. 그렇지 않으면 wkhtmltopdf가이를 무시합니다.

---

@import표기법 을 사용하여 테스트했습니다 .

<style>
@import 'https://fonts.googleapis.com/css?family=Montserrat';
</style>

django-wkhtmltopdf 버전 2.0.3을 사용하고 있습니다.

---

이 작업을 (현지에서) 얻기 위해 무수한 변형을 시도했을 것입니다. WKHtmlToPdf를 통해 Open Sans Condensed를 pdf에 포함 시키려고합니다.

Google에서 직접 Open Sans Condensed ttf를 다운로드하여 설치하여 설치하는 것이 중요하다고 생각합니다. 설치 후 다른 서비스에 액세스 할 수 있도록 재부팅하는 것도 중요합니다. 원래 font-squirrel에서 ttf를 다운로드했고 압축이 windows / fonts에서 "Open Sans"로 나열되었습니다. 이는 잘못된 것입니다. Google 설치를 살펴보면 "Open Sans Condensed Light"로 표시되므로 Google의 local('Open Sans Cond Light')스크립트도 잘못되었습니다. .

앞서 언급했듯이 스트레치와 웨이트에 대해 명시 적이어야하므로 이것이 저에게 효과적이었습니다.

    @font-face { 
     font-family: 'Open Sans'; 
     font-style: normal; 
     font-weight: 400; 
     src: local('Open Sans');
    }

    @font-face { 
     font-family: 'Open Sans Condensed'; 
     font-stretch:condensed; 
     font-style: normal; 
     font-weight: 300; 
     src: local('Open Sans Condensed Light');
    }

@@font-face { font-family: 'Open Sans Condensed Bold'; font-stretch:condensed; font-style: normal; font-weight: 700; src: local('Open Sans Condensed'), local('Open Sans Condensed Bold');}

---

나는 약 이틀 동안 이것으로 어려움을 겪고 있습니다. 위의 답변 중 어느 것도 효과가 없다면 조언합니다.

웹 서버를 호스팅하는 시스템에 글꼴 (ttf)을 설치하고 일반적인 글꼴로 수행하는 것처럼 CSS에 필요합니다.

body{
    font-family: 'Lato';
}

Now wkhtmltopdf should be able to include the font

---

In my case I just had to add this option

--javascript-delay 1000

and Google Font text started to show up.

[wkhtmltopdf 0.12.4 (with patched qt)]

---

Make sure you're not declaring what font you are printing with in your print stylesheet.

ReferenceURL : https://stackoverflow.com/questions/6721295/google-web-fonts-and-pdf-generation-from-html-with-wkhtmltopdf