ng 重复@font面样式不起作用

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 中可能是一个很大的禁忌，但我div中有我的style，因为我并没有试图让它以任何可能的方式工作。

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

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

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

Answer 1

尝试通过样式应用字体：

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

Answer 2

你是什么版本的 angularjs ？ 在测试你的代码时，我使用 1.2.x，不适用于你的代码。更新到 angular 1.4.8 后，这有效：

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"
},
];

});

<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>

Answer 3

我发现了问题所在......这真的很令人沮丧，这就是问题所在......

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