在文本框中加載字體

Question

這是我的CSS代碼

@font-face {
font-family: 'vanavil Avvaiyar';
src: url('../fonts/vanavil Avvaiyar.TTF') format('truetype');
}

@font-face {
font-family: 'Bamini';
src: url('../fonts/Bamini.TTF') format('truetype');
}

我想根據下拉選擇使用上面兩種字體。

這是我的控制器

$scope.fonts = [
    {
        "fontName": "Bamini"
    },
    {
        "fontName": "vanavil Avvaiyar"
    }
]

這是我的HTML Drop Down

<select class="form-control" ng-model="selectFont" ng-options="font.fontName for font in fonts"></select>

這是我想要使用所選字體的文本框

<input class="form-control" type="text" ng-model="Name" ng-style="{'font-family':selectFont.fontName}">

當我從下拉菜單中選擇字體vanavil Avvaiyar時。 字體正確加載到文本框中。 但不是在我選擇巴米尼的時候。 我錯過了什么。 提前致謝。

Answer 1

它運行正常..請參閱下面的代碼段。

 (function() { 'use strict'; angular .module('app', []) .controller('MyController', function($scope) { var vm = this; vm.name = ""; vm.fonts = [{ "fontName": "Bamini" }, { "fontName": "vanavil Avvaiyar" } ]; }); })();

 <html ng-app="app"> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://code.angularjs.org/1.5.8/angular.js"></script> </head> <body ng-controller="MyController as vm"> <div class="row"> <div class="form-group"> <label class="col-md-2">Font</label> <div class="col-md-2 selectBox"> <select name="title" class="form-control" ng-options="font.fontName for font in vm.fonts" ng-model="vm.selectFont"> <option value="" disabled selected>Select Font</option> </select> </div> </div> </div> {{vm.selectFont | json}} <input class="form-control" type="text" ng-model="vm.name" ng-style="{'font-family':vm.selectFont.fontName}"> </body>

在文本框中加載字體

問題描述

1 個解決方案

解決方案1
0 2017-05-17 08:33:18

在文本框中加載字體

問題描述

1 個解決方案

解決方案1 0 2017-05-17 08:33:18

解決方案1
0 2017-05-17 08:33:18