我是AngularJS的新手。 我有一个web服务,它返回字体的cdn链接列表。 我想使用它并在运行时使用字体显示一些文本。 我的客户端应用程序是用angularJS编写的。 我怎样才能做到这一点? 请帮忙。 这是我到目前为止所尝试的。 我如何根据需要注入字体?
app.js(web服务返回的数据在此显示为列表。)
var app = angular.module( 'app', [] ); app.controller('appController', function($scope) { $scope.fonts = [ { "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" }, ]; });app.html
<div ng-app="app" ng-controller="appController"> <p ng-repeat="font in fonts"> <span style="@font-face {font-family:{{font.family}}; src: url({{font.url}});}"> {{font.family}} </span> </p> </div>JSFiddle - https://jsfiddle.net/lpsandaruwan/rpffoo06/
I'm new to AngularJS. I have a web service which returns a list of cdn links for fonts. I want to use it and show some text using the fonts in run time. My client application is written in angularJS. How can I achieve this? Please help. This is what I have tried so far. How can I inject font faces on demand?
app.js (data returned by web service is shown as a list here.)
var app = angular.module( 'app', [] ); app.controller('appController', function($scope) { $scope.fonts = [ { "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" }, ]; });app.html
<div ng-app="app" ng-controller="appController"> <p ng-repeat="font in fonts"> <span style="@font-face {font-family:{{font.family}}; src: url({{font.url}});}"> {{font.family}} </span> </p> </div>JSFiddle - https://jsfiddle.net/lpsandaruwan/rpffoo06/
最满意答案
以下是解决方案,以您未放入font-family的样式为例:{{font.family}}; http://pastebin.com/WmBv5XDB
Here is the Solution, in the style you are not putting font-family:{{font.family}}; http://pastebin.com/WmBv5XDB
更多推荐
发布评论