JSPDF 사용자 정의 글꼴

Question

CSS 코드를

@font-face { 
    font-family: Calibri; 
    src: url("fonts/calibri.ttf"); 
    font-style: normal; 
} 

JS 코드

doc.setFont('Calibri'); 
doc.setFontSize(7.5); 
doc.setFontType("normal"); 
doc.text(10, 10, "Hi, How r u"); 

나는 돋움 글꼴을 추가 할 작동하지 않는 추가,하지만 작동하지 않습니다 JS 스크립트의

목록

포함

<script src="/assets/global/scripts/jspdf/jspdf.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/acroform.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/from_html.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/addhtml.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/annotations.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/autoprint.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/canvas.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/cell.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/context2d.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/javascript.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/outline.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/prevent_scale_to_fit.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/split_text_to_size.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/standard_fonts_metrics.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/svg.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/total_pages.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/zlib.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/png.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/png_support.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/filesaver.js" type="text/javascript"></script> 

CSS

/* 
To change this license header, choose License Headers in Project Properties. 
To change this template file, choose Tools | Templates 
and open the template in the editor. 
*/ 
/* 
    Created on : Apr 23, 2017, 12:57:52 PM 
    Author  : common 
*/ 

@font-face { 
    font-family: Calibri; 
    src: url("fonts/calibri.ttf"); 
    font-style: normal; 
} 

/* 
@font-face { 
    font-family: Calibri; 
    src: url("fonts/calibrii.ttf"); 
    font-style: italic; 
} 

@font-face { 
    font-family: Calibri; 
    src: url("fonts/calibrib.ttf"); 
    font-style: normal; 
    font-weight: bold; 
} 

@font-face { 
    font-family: Calibri; 
    src: url("fonts/calibriz.ttf"); 
    font-style: italic; 
    font-weight: bold; 
}*/ 

Answer 1

지금은 할 수 없습니다. 당신이 source code에 대해 살펴 경우

, 당신은이 글꼴을 모르는 경우, 당신은 글꼴 그 중 하나를 사용할 수 있습니다

switch (fontName) { 
     case 'sans-serif': 
     case 'verdana': 
     case 'arial': 
     case 'helvetica': 
     fontName = 'helvetica'; 
     break; 
     case 'fixed': 
     case 'monospace': 
     case 'terminal': 
     case 'courier': 
     fontName = 'courier'; 
     break; 
     case 'serif': 
     case 'cursive': 
     case 'fantasy': 
     default: 
     fontName = 'times'; 
     break; 
    } 

글꼴로 times를 반환하는 스위치가 참조 또는 글꼴을 지원하도록 라이브러리를 편집 할 수 있습니다.

그렇지 않으면, 사용자 정의 글꼴 지원을 추가 진행 라이브러리에있는 일이 : https://github.com/sphilee/jsPDF-CustomFonts-support

모든 필요한 파일을 추가 한 후, 당신은 다음과 같이 사용한다 :

doc.addFont('fonts/calibri.ttf', 'Calibri', 'Calibri-normal', 'normal'); 

Answer 2

안녕 당신이 시도 할 수 있습니다 및 기능 이상

API.addFont = function(fontScript, font, style) { 
     addFont(fontScript, font, style, 'StandardEncoding'); 
    }; 

당신이 당신의 글꼴 변경 호출하기 전에/lib 디렉토리에 추가해야합니다, 같은 폰트를 수정,하지만 난 SCR을 추가 제안 ipt 태그를로드하고 jspdf를로드 한 다음 해당 스크립트 태그에이 함수를 추가하십시오.

이제,

를 폰트 CSS를 추가해야하고이 같은 PDF의 폰트를 수정할 수 있습니다.

doc.addFont('fonts/calibri.ttf', 'Calibri', 'normal'); 
doc.setFont('Calibri'); 
doc.text(50,50,'Now this is Calibri'); 

Answer 3

처럼 당신이 https://github.com/sphilee/jsPDF-CustomFonts-support에서 jsPDF-CustomFonts 지원 라이브러리를 사용할 수 있습니다 위 밝혔다.

는 READ.ME 파일에 대한 지침이 있지만이 지침은 https://github.com/sphilee/jsPDF-CustomFonts-support/issues/16#issuecomment-307174041했다 나가는 것을 얻었다 :

1. 폰트 Squirell에 https://www.fontsquirrel.com/tools/webfont-generator
2. 를 눌러 다운로드하여 .TTF 폰트를 업로드하면 얻을 것이다 새로운 .ttf 파일이있는 압축 파일. 이제 base64로 인코딩해야합니다. https://www.giftofspeed.com/base64-encoder/. 당신이 당신의 글꼴의 base64로 코드를 일단
3. 당신은 당신이와 다운로드가있는 vfs_fonts.js 파일 jsPDF-CustomFonts을 지원 https://github.com/sphilee/jsPDF-CustomFonts-support로 이동해야하는 다른 글꼴을 분리하는 데 사용되는 ','중 한 후 그 파일에 "YOUR_FONT_NAME.ttf": "YOUR BASE64 CODE"를 추가해야합니다 (끝 부분에 쉼표로 끝나야합니다).
4. 일단 그렇게하면 doc 함수를 추가 할 수 있습니다. addFont ("YOUR_FONT_NAME.ttf", "YOUR_FONT_NAME.TTF "," ","WinAnsiEncoding ") 정상
는

당신은`doc.addFont ('돋움', '돋움', '보통')을 시도 할 수