我正在动态创建存储在我的服务器上的字体列表。我想通过字体列表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是有效的。
任何想法为什么这不起作用?我该怎么办?
不要忘记字体系列的引号。或者,更好的是,使用'ng-style'。 – cdhowie
没有,只是默认为'body'字体...即使有一个'!important'在其上 – Katie
@Katie而不是使用模板尝试我的代码片段与您正在加载的字体的名称。 font-family:'FontName'; –