首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用Ionic2自定义字体

使用Ionic2自定义字体
EN

Stack Overflow用户
提问于 2016-04-27 00:38:25
回答 5查看 17.5K关注 0票数 18

在我的Ionic2项目中,我将我的字体(ttf格式)放在了www/build/fonts文件夹中。但当我构建应用程序时,字体就消失了。

我该怎么做呢?

EN

回答 5

Stack Overflow用户

发布于 2016-10-01 21:00:57

在最新的Ionic2 RC中,这似乎已经移到了src/assets下的某个地方,可能是src/assets/fonts。在您的SCSS文件中对这些文件的引用(根据@indermohan-singh)是相对于CSS文件的,因此将类似于url("../assets/fonts/aleo-italic-webfont.woff2")

src/assets下的所有东西都会在构建过程中被复制过来,所以这是存放你需要的其他东西的好地方,比如图片。

票数 15
EN

Stack Overflow用户

发布于 2016-12-21 18:59:59

添加自己的字体的最好方法是使用gulp。我将我的自定义字体添加到目录app/theme/fonts中,并将此源代码添加到gulpfile.js文件中的gulp插件ionic-gulp-fonts-copy中。

代码语言:javascript
复制
// add own src 
gulp.task('fonts', function(){
  return copyFonts({
    src: [
      'node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)',
      'app/theme/fonts/**/*.+(ttf|woff|woff2)'
    ],
    dest: 'www/build/fonts'
  })
});

src中的第一行是默认的,第二行是自定义的。在这之后,你可以用css声明你的字体,例如。

代码语言:javascript
复制
/* regular */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(../fonts/opensans/OpenSans-Regular.ttf) format('truetype');
}

试试看!

票数 1
EN

Stack Overflow用户

发布于 2017-01-30 19:27:02

ionic 2编译时,如果您检查app.scss上的字体路径通常是../../assets,则会创建www/ build /main.css,但在构建期间该点不会指向任何地方。

在app.scss上添加路径,如../assets/fonts/fontname.ttf,并在www/assets/fonts/fontname.ttf上添加字体

它对我来说是完美的。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36870847

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档