AngularJS按需加载字体(AngularJS load font

编程入门 行业动态 更新时间:2024-10-27 06:26:14
AngularJS按需加载字体(AngularJS load font-face on demand)

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

更多推荐

本文发布于:2023-08-05 08:12:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1428766.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:按需   加载   字体   AngularJS   load

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!