JSPDF自定義字體添加不工作

CSS代碼JSPDF自定義字體添加不工作

@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; 
}*/

來源

2017-04-24 Hardeep Singh

你可以用'doc.addFont（ '宋體'， '宋體'， '普通'）嘗試;'這是我看到的名字當我在Fontographer中打開Calibri字體時 – ConnorsFan

檢查您使用自定義字體的權限是否正確Calibri是我相信的版權資源 –

你目前不能。

如果你看一看到source code，你看到有一個開關，如果它不知道的字體，返回times如字體

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

您可以使用的那一個字體，或編輯庫以支持您的字體。

否則，正在進行庫，以自定義字體添加支持工作：https://github.com/sphilee/jsPDF-CustomFonts-support

將所有需要的文件後，你應該使用這樣的：

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

來源

2017-05-16 10:50:51 rpadovani

我急於使用自定義字體任何方式請給我建議 –

@HardeepSingh I用可能的解決方案編輯答案 – rpadovani

仍然無效如果你是完整的例子，請在回答中寫出完整的代碼 –

你好你可以試試和修改字體這樣，

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

上述功能，你將不得不添加到LIB /你的字體改變調用之前，但我會建議增加SCR在加載jspdf之後添加ipt標記，並在該腳本標記中添加此函數。

現在，您需要添加字體的CSS，

，然後你可以修改這樣的PDF的字體。

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

來源

2017-05-23 07:44:43 MehulJoshi

不工作。函數已經存在於jspdf.js文件中 –

你能提供小提琴嗎？ – MehulJoshi

我從來沒有試過jsfiddle。如果你曾經使用過jspdf並添加自定義字體，那麼請在我的計算器或任何其他資源上提供我的代碼。 –

就像上面說你可以在https://github.com/sphilee/jsPDF-CustomFonts-support使用jsPDF-CustomFonts支持庫。

上有READ.ME文件的說明，但我去了什麼是這些指令https://github.com/sphilee/jsPDF-CustomFonts-support/issues/16#issuecomment-307174041：

上傳的.ttf字體的字體Squirell https://www.fontsquirrel.com/tools/webfont-generator

按下下載，你會得到一個帶有新的.ttf文件的壓縮文件。現在你必須編碼到base64 https://www.giftofspeed.com/base64-encoder/。

一旦你有你的字體中的Base64編碼，你必須去，你必須下載與該vfs_fonts.js文件jsPDF-CustomFonts支持https://github.com/sphilee/jsPDF-CustomFonts-support和用於分離不同字體的「，」一後在該文件中，您必須添加：「YOUR_FONT_NAME.ttf」：「您的BASE64代碼」（請記住在引號後以逗號結尾）。

一旦你這樣做，你可以添加功能文檔。 addFont（「YOUR_FONT_NAME.ttf」，「YOUR_FONT_NAME。TTF」，「正常」，「WinAnsiEncoding」）

來源

2017-11-30 16:02:36 TiagoS

JSPDF自定義字體添加不工作

回答

相關問題