Angularjs uigrid過濾器按鈕顯示爲中文字體

Question

我在項目中使用了angularjs ui-grid。 下面是我的代碼

<link href="@Url.Content("~/Content/js-image-slider.css")" rel="stylesheet" type="text/css" /> 
 
    <link href="@Url.Content("~/Content/themes/base/js-image-slider.css")" rel="stylesheet" type="text/css" /> 
 
<link href="@Url.Content("~/Content/ui-grid.min.css")" rel="stylesheet" type="text/css" /> 
 
<link href="@Url.Content("~/Content/gemscustomstyle.css")" rel="stylesheet" type="text/css" /> 
 
<script src="@Url.Content("~/Scripts/jquery.min.js")"></script> 
 
    <script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script> 
 
    <script src="@Url.Content("~/Scripts/kendo.all.min.js")"></script> 
 
    
 
    <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script> 
 
    <script src="@Url.Content("~/Scripts/js-image-slider.js")"></script> 
 
    <script src="@Url.Content("~/Scripts/jquery.blockUI.js")"></script> 
 
<script src="@Url.Content("~/Scripts/AngularGrid/angularjs.min.js")" type="text/javascript"></script> 
 
<script src="@Url.Content("~/Scripts/AngularGrid/angular-ng-route.js")" type="text/javascript"></script> 
 
<script src="@Url.Content("~/Scripts/AngularGrid/ui-grid.min.js")" type="text/javascript"></script> 
 

 
<div ng-app = "myapp" ng-controller="CitywiseReportController"> 
 
    
 
    <div id="grid1" ui-grid="gridoptions" ui-grid-grouping ui-grid-resize-columns class="myGrid" style="width: 98%"></div> 
 
    </div> 
 
     
 
<script type="text/javascript"> 
 
    
 
    var app = angular.module('myapp', ['ui.grid']); 
 

 
    app.controller('CitywiseReportController', function ($scope, CitywiseReportService) { 
 
     
 
     $scope.configureHeadCountGrid = function() { 
 
      $scope.gridoptions = { 
 
      data:'cityReportData', 
 
       enableGridMenu: true, 
 
       enableFiltering: true, 
 
       enableColumnResizing: true 
 
      } 
 
      //The grid options 
 
      $scope.gridoptions.columnDefs = [ 
 
          { name: 'Duty Travel ID', field: 'DutyTravelId', width: '90' }, 
 
          { name: 'Staff ID', field: 'StaffNumber', width: '90' }, 
 
          { name: 'Staff Name', field:'StaffName', width: '120' }, 
 
          { name: 'DT Cost Center', field: 'CostCenter', width: '120' }, 
 
          { name: 'DT Travel Category', field: 'TravelCategory', width: '120' }, 
 
          { name: 'City Code', field: 'CityCode', width: '60' }, 
 
          { name: 'City Name', field: 'CityName', width: '100' }, 
 
          { name: 'Departure Date', field: 'DepartureDate', width: '120', type: 'date', format: '{0:dd-MMM-yyyy}' }, 
 
          { name: 'Arrival Date', field: 'ArrivalDate', width: '120', type: 'date', format: '{0:dd-MMM-yyyy}' } 
 
         ]; 
 

 
     } 
 
     getStudents(); 
 
     function getStudents() { 
 
      CitywiseReportService.getStudents() 
 
      .success(function (studs) { 
 
       $scope.cityReportData = studs; 
 
       
 
      }) 
 
      .error(function (error) { 
 
       
 
       $scope.status = 'Unable to load customer data: ' + error.message; 
 
       
 
      }); 
 
     } 
 
     $scope.configureHeadCountGrid(); 
 
    }); 
 

 
    app.factory('CitywiseReportService', ['$http', function ($http) { 
 
     var CitywiseReportService = {}; 
 
     CitywiseReportService.getStudents = function() { 
 
      
 
      return $http.get('/DutyTravel/GetCityWiseDTReport'); 
 
     }; 
 
     return CitywiseReportService; 
 

 
    } ]); 
 
</script>

但是當網格顯示電網濾波器圖標圖像表示作爲中國字體。

，並在Chrome控制檯它顯示 http://localhost:58206/Content/ui-grid.woff http://localhost:58206/Content/ui-grid.ttf

需要幫助

Answer 1

您需要添加web.config

<system.webServer> 
    <staticContent> 
     <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" /> 
     <mimeMap fileExtension=".woff" mimeType="application/font-woff" /> 
     <mimeMap fileExtension=".woff2" mimeType="application/font-woff" /> 
    </staticContent> 
</system.webServer>