AngularJS按需加載字體

我是AngularJS的新手。我有一個web服務，它返回字體的cdn鏈接列表。我想使用它並在運行時使用字體顯示一些文本。我的客戶端應用程序是用angularJS編寫的。我怎樣才能做到這一點？請幫忙。這是我到目前爲止所嘗試的。我如何根據需要注入字體？AngularJS按需加載字體

app.js（由Web服務返回的數據顯示爲列表在這裏。）

var app = angular.module('app', []); 

app.controller('appController', function($scope) { 

    $scope.fonts = [ 
    { 
     "family": "Abhaya Libre", 
     "url": "https://cdn.rawgit.com/mooniak/abhaya-libre-font/gh-pages/fonts/AbhayaLibre-Regular.otf" 
    }, 
    { 
     "family": "Gemunu Libre", 
     "url": "https://cdn.rawgit.com/mooniak/gemunu-libre-font/gh-pages/tests/fonts/GemunuLibre-Regular.otf" 
    }, 
    ]; 

});

app.html

<div ng-app="app" ng-controller="appController"> 

    <p ng-repeat="font in fonts"> 

    <span style="@font-face {font-family:{{font.family}}; src: url({{font.url}});}"> 
     {{font.family}} 
    </span> 

    </p> 

</div>

的jsfiddle - https://jsfiddle.net/lpsandaruwan/rpffoo06/

來源

2016-12-06 lpsandaruwan