Question

我正在动态创建存储在我服务器上的字体列表。我希望通过字体列表ng-repeat并将每种字体应用于新元素。

所以这就是我正在做的事情：

<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="font in ctrl.fontList">
        <style>
            @font-face {font-family:"{{font.family}}"; src: url({{font.url}});}
        </style>
        <svg height="100%" width="100%" position>
          <rect x="0" y="0" width="100%" height="100%" fill="#288feb"></rect>
          <g class="groupLayer">
              <text fill="#ffffff" x="0" y="0" font-size="48" font-family="{{font.family}}"
>{{ctrl.text}}</text>
          </g>
        </svg>
    </div>
</div>

这在html中可能是一个很大的禁忌，但我在我的style中有div，因为我并没有尝试以任何可能的方式工作。

无论如何，这对我不起作用。

{{font.family}}输出OstrichSans-Black和{{font.url}}本地托管在我的localhost上，并且网址有效。

为什么这不起作用的任何想法？我该怎么办？

Answer 1

尝试通过样式应用字体：

<text style="font-family: '{{font.family}}';">

Answer 2

你是什么版本的angularjs？在测试你的代码时，我使用的是1.2.x并且没有使用你的代码。更新到角度1.4.8后，这有效：

＆＃13;

var app = angular.module('myApp',[]);
 
app.controller('MyController', function($scope) {
     var ctrl = this;
  ctrl.fontList = [
    {
        "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"
    },
  ];
 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="row" ng-app="myApp" ng-controller="MyController as ctrl">
    <div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="font in ctrl.fontList">
        <style>
            @font-face {font-family:{{font.family}}; src: url({{font.url}});}
        </style>
        <svg height="100%" width="100%" position>
          <rect x="0" y="0" width="100%" height="100%" fill="#288feb"></rect>
          <g class="groupLayer">
              <text fill="#ffffff" x="0" y="50" font-size="48" style="font-family:{{font.family}}"
>{{font.family}}</text>
          </g>
        </svg>
        
    </div>
</div>

＆＃13;

Answer 3

我发现了问题是什么......这就是问题所在令人沮丧......

很简单，我忘了在url内的@font-face参数周围加上引号。这就是原因！

ng-repeat @ font-face风格不起作用

3 个答案: