在Angular 2 +流星應用程序中包含Google字體

Question

Newb to Angular 2。

如何在我的應用中加入Google字體。 應用結構是

客戶
| --app.ts
| --main.ts
| --index.html

IndexFile.html

<head></head>
<body style="font-family: 'Montserrat', sans-serif;">
    <div class="container-fluid">
        <app-start>Loading...</app-start>
    </div>
</body>

頭標記中包含的鏈接

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

但是沒有發生任何影響，還在客戶端文件夾（font.js）中創建了一個JS文件並插入了代碼

  Meteor.startup(function() {

  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

 })

但沒有效果。

在Angular 2 + Meteor應用程序中包含此字體的正確方法

Answer 1

使用@import找到解決方案
在common_style.css文件中插入此代碼，該文件放在公共文件夾中

@import url(https://fonts.googleapis.com/css?family=Montserrat);

然后在app.ts - main loader typescript文件中我已經包含了樣式

@Component({
  selector:'app-start',
  template:`
        <div style=" font-family: 'Montserrat', sans-serif;">
        <navbar></navbar>
        <router-outlet></router-outlet>
        <footer></footer>
        </div>
  `,
  directives : [ NavbarComponent,FooterComponent, ROUTER_DIRECTIVES ],
  providers  : [ ROUTER_PROVIDERS ]
})

並在所有頁面上獲得了風格

在Angular 2 +流星應用程序中包含Google字體

問題描述

1 個解決方案

解決方案1
17 已采納 2016-06-07 18:51:07

在Angular 2 +流星應用程序中包含Google字體

問題描述

1 個解決方案

解決方案1 17 已采納 2016-06-07 18:51:07

解決方案1
17 已采納 2016-06-07 18:51:07