ng-repeat @ font-face樣式不起作用

我正在動態創建存儲在我的服務器上的字體列表。我想通過字體列表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是有效的。

任何想法爲什麼這不起作用？我該怎麼辦？

來源

2016-12-29 Katie

我發現了什麼問題是... ...，這真的令人沮喪，這是問題...

很簡單，我忘了在@font-face內的url參數周圍加上引號。這實際上是原因！

來源

2016-12-30 21:52:50 Katie

嘗試通過風格應用的字體改爲：

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

來源

2016-12-29 18:11:39

不要忘記字體系列的引號。或者，更好的是，使用'ng-style'。 – cdhowie

沒有，只是默認爲'body'字體...即使有一個'！important'在其上 – Katie

@Katie而不是使用模板嘗試我的代碼片段與您正在加載的字體的名稱。 font-family：'FontName'; –

什麼你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>

來源

2016-12-29 19:21:04

注：比較這個答案與你的代碼，因爲我做了一些小的改變。 –

ng-repeat @ font-face樣式不起作用

回答

相關問題