Web端在线设计器如何调用自定义字体

如何调用自定义的字体
在实际的应用场景中，经常会有这样的情况，机器中本身自带的字体不能满足特殊字节的显示。特别是化工行业、建筑行业、金属行业特殊符号用的特别多。这时候为了满足实际应用中的这些特殊字符的问题，就会自定义一份字体文件，在进行报表设计的时候进行调用。

现在我们就来讲解如何进行自定义文字的调用
1、首先就是安装字体，需要把字体安装在对应的路径下，具体路径如下：C:\Windows\Fonts


2、如果是使用桌面端设计器，你在此处安装了对应的字体文件之后，在桌面端的设计器中就可以调用该字体，这里我调用的是一个 特殊的字体“SJQY”钢材建筑行业使用的一个特殊字体


3、但是在web端设计中，不进行API的设置是没办法调用该字体的，具体API的调用的方法如下
其中 'Arial','SJQY','Times New Roman'  代表字体的命名，

1.    designerOptions.fonts = ['Arial','SJQY','Times New Roman'];

复制代码

1.     <script>
   
2. 
   
3.                 var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions();
   
4.         designerOptions.server.url = 'api';
   
5.                 designerOptions.reportInfo = '@reportId' ? { id: '@reportId' } : null;
   
6.                
   
7.                 designerOptions.openButton.visible = true;
   
8.                 designerOptions.saveButton.visible = true;
   
9.                 designerOptions.saveAsButton.visible = true;
   
10.                
    
11.                 // Used in About dialog and File View Help tab.
    
12.                 designerOptions.documentation.home = 'https://www.grapecity.com/activereports/docs/v15/online-webdesigner/overview.html';
    
13.                 // Used in notifications about report items transformation.
    
14.                 designerOptions.documentation.reportItemsTransformation = 'https://www.grapecity.com/activereports/docs/v14/online-webdesigner/supportedcontrols.html';
    
15. 
    
16.                 designerOptions.reportItemsFeatures.table.autoFillFooter = true;
    
17. 
    
18.         var viewer = null;
    
19.         designerOptions.openViewer = function (options) {
    
20.             if (viewer) {
    
21.                 viewer.openReport(options.reportInfo.id);
    
22.                 return;
    
23.             }
    
24.             viewer = GrapeCity.ActiveReports.JSViewer.create({
    
25.                 locale: options.locale,
    
26.                 element: '#' + options.element,
    
27.                 reportService: {
    
28.                     url: 'api/reporting',
    
29.                 },
    
30.                 reportID: options.reportInfo.id,
    
31.                 settings: {
    
32.                     zoomType: 'FitPage'
    
33.                 },
    
34.             });
    
35.                 };
    
36.         designerOptions.fonts = ['Arial','SJQY','Times New Roman'];
    
37.                 designerOptions.dataTab.dataSets.canModify = true;
    
38.                 designerOptions.dataTab.dataSources.canModify = true;
    
39. 
    
40.                 GrapeCity.ActiveReports.WebDesigner.renderApplication("designer-id", designerOptions);
    
41. 
    
42.     </script>

复制代码

4、预览结果