在 Angular 2 + Meteor 应用程序中包含 Google 字体
Posted
技术标签:
【中文标题】在 Angular 2 + Meteor 应用程序中包含 Google 字体【英文标题】：Include Google Font in Angular 2 + Meteor Application 【发布时间】：2016-10-07 02:32:51 【问题描述】：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>
head 标签中包含的链接
<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 应用程序中包含此字体的正确方法
【问题讨论】：
您是否将字体系列包含在 css 中？ 我在 body 标签中包含了内联 CSS 很奇怪，head 中的链接应该可以工作。因为我用的是这种方式，所以工作正常。 【参考方案1】：使用@import 找到解决方案 将此代码插入到我放置在公共文件夹中的 common_style.css 文件中
客户 |--app.ts |--main.ts |--index.html 公开 |--样式 |--common_style.css
@import url(https://fonts.googleapis.com/css?family=Montserrat);
然后在 app.ts - 主加载器打字稿文件中，我已经包含了样式
@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 + Meteor 应用程序中包含 Google 字体的主要内容，如果未能解决你的问题，请参考以下文章
alanning:role，在 angular2-meteor 中导入问题
Angular-Meteor - 如何在基于包的设计中包含 ng 模板？
初识Angular-Meteor（Angular-Meteor使实时全栈更简单）