Question

我是AngularJS的新手。我有一个Web服务，它返回字体的cdn链接列表。我想使用它并在运行时使用字体显示一些文本。我的客户端应用程序是用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/

Answer 1

以下是解决方案，您没有使用font-family：{{font.family}}; http://pastebin.com/WmBv5XDB

AngularJS按需加载font-face

1 个答案: