2016-12-29 95 views
0

我正在动态创建存储在我的服务器上的字体列表。我想通过字体列表ng-repeat并将每种字体应用到新元素。ng-repeat @ font-face样式不起作用

所以这是我在做什么:

<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和URL是有效的。

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

回答

0

我发现了什么问题是... ...,这真的令人沮丧,这是问题...

很简单,我忘了在@font-face内的url参数周围加上引号。这实际上是原因!

0

尝试通过风格应用的字体改为:

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

不要忘记字体系列的引号。或者,更好的是,使用'ng-style'。 – cdhowie

+0

没有,只是默认为'body'字体...即使有一个'!important'在其上 – Katie

+0

@Katie而不是使用模板尝试我的代码片段与您正在加载的字体的名称。 font-family:'FontName'; –

0

什么你angularjs版本?同时测试你的代码,我使用1.2.x并且不适用于你的代码。更新到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>

+0

注:比较这个答案与你的代码,因为我做了一些小的改变。 –