【问题标题】:How do i use a custom Font ( ttf - File ) in Ionic 2 ?如何在 Ionic 2 中使用自定义字体 (ttf-File)?
【发布时间】:2017-02-14 01:32:22
【问题描述】:

我正在尝试在 Ionic 2 中安装和使用自定义字体 ( Chewy.ttf ) 我已经尝试将它与 @font-face { font-family: Chewy; src: url(../../www/assets/fonts/Chewy.ttf); } 一起使用,就像 css 一样 在浏览器中它工作得很好但是当我构建它时 它不再起作用了 感谢您的帮助

【问题讨论】:

    标签: angularjs ionic-framework sass ionic2


    【解决方案1】:

    首先将您的字体文件放在 src/assets/fonts/name.ttf 路径中。 然后在 src/app/app.scss

    @font-face {
    font-family: name;
    src: url(../assets/fonts/name.ttf) format("ttf");
    font-weight: 200
    }
    body {
    font-family: name !important;
    }
    

    【讨论】:

      【解决方案2】:

      现在你可以使用Google fonts,例如下载这个:https://fonts.gstatic.com/s/raleway/v11/yQiAaD56cjx1AooMTSghGfY6323mHUZFJMgTvxaG2iE.woff2

      只需将下载的文件复制到文件夹“www/assets/fonts”并根据需要重命名即可。

      在 app.scss 文件中复制以下代码:

      @font-face {
      font-family: "Raleway";
      src: url("../assets/fonts/Raleway.woff2") format("woff2");
      }
      

      您现在可以使用新字体了

      H1 {
      font-family : "Raleway";}
      

      【讨论】:

      • @Inzammalik for ionic 3 将代码复制到文件 variables.scss 中,可以使用任何字体,但一定要获取所有字体文件
      猜你喜欢
      • 2011-11-22
      • 1970-01-01
      • 2020-07-28
      • 2015-05-10
      • 1970-01-01
      • 1970-01-01
      • 2017-07-08
      • 1970-01-01
      • 2012-05-09
      相关资源
      最近更新 更多