【问题标题】:How to customize font size in Ionic Framework如何在 Ionic Framework 中自定义字体大小
【发布时间】:2014-09-16 00:24:44
【问题描述】:

我正在使用 ionic 框架(与 cordova)来开发移动应用程序。 我想要做的是增加字体大小(通常在我的应用程序中)。

我在官方文档中看到过:http://ionicframework.com/tutorials/customizing-ionic-with-sass/。 但是我不明白如何在 sass 工作后进行自定义。

我正在使用类似的基于标签的应用程序:http://forum.ionicframework.com/uploads/default/269/9934610f0a08b8d2.png 我尝试在选项卡上手动添加一个类,但结果不是很干净...文本被裁剪...

有没有官方的方法可以改变字体大小?

【问题讨论】:

    标签: css font-size ionic-framework


    【解决方案1】:

    我在我的应用程序中使用 Ionic,这就是我处理大小调整的方式:

    1. 在 CSS 中找到需要修改的类/元素
    2. 设置padding:0 0 0 0; 或您想要的值(上、右、下、左)。
    3. 设置字体大小
    4. 设置高度
    5. 设置行高

    编辑:这就是我修改标签项的方式

    .tab-item{
        margin: 0;
        line-height: 100px;
        box-sizing: content-box;
        font-size: 40px;
        color:#FFFFFF;
        font-family: 'Roboto-Light';
        opacity: 1;
        max-width: 200px;
    }
    

    【讨论】:

    • 感谢您的回答,但我没有成功调整标签文本/图标的大小。我尝试覆盖的类是 a.tab-item{} 或 a.tab-item i{} / a.tab-item span{}...但似乎不起作用
    • @psv 你能在你的元素上发布一些你的代码/屏幕截图吗?还要检查编辑。
    • 使用“px”似乎不是个好主意,更推荐使用“em”
    • 最好将 SCSS 变量用于此类。
    【解决方案2】:

    我认为您不需要了解 Sass 上的所有内容。 在您的项目目录中,在

    .../yourProject/www/lib/ionic/scss
    

    有一个名为 _variables.scss 的文件,您将在其中看到如下内容: 这些是字体大小变量,您只需更改这些然后构建 ionic css 文件。 我建议你使用https://prepros.io/。希望对你有所帮助。

    【讨论】:

      【解决方案3】:

      想我会分享我在 Ionic 中学到的东西。

      基本上,Ionic 为您可以设计的每件东西都有一套默认的大小、颜色、字体,并且该集合存储在 _variables.scss 文件中。该文件位于 lib/ionic/scss/_variables.scss

      打开此文件并搜索您要更改的内容。例如,我需要增加标题字体大小。于是我在_variables.scss文件中搜索,发现$bar-title-font-size。

      它被定义为$bar-title-font-size: 17px !default;

      现在,打开您的 ionic.app.scss 文件并编写类似的内容

      $bar-title-font-size: 25px !default;

      ***记得把上面的语句写在@import "ionic/scss/ionic";语句之前。

      保存文件,您的更改将立即生效。离子让它变得如此简单!!! :)

      【讨论】:

        【解决方案4】:

        搜索你的项目/www/css并编辑style.css,在文件里面写:

        {font-size:55px !important;}
        

        55px 更改为您需要的任何尺寸。

        【讨论】:

          【解决方案5】:

          您通常想决定何时使用哪种图标大小,因此我提出了以下解决方案。

          CSS

          /* Ionicon icons resizing css */
          .ion-1x { font-size: 24px !important;}
          .ion-2x { font-size: 48px !important;}
          

          HTML

          // in iconics framework
          <ion-icon name="logo-pinterest" class="ion-1x"></ion-icon>
          <ion-icon name="logo-twitter" class="ion-2x"></ion-icon>
          
          // without ionics framework
          <i class="ion-1x ion-social-pinterest"></i>
          <i class="ion-2x ion-social-twitter"></i>
          

          【讨论】:

            【解决方案6】:

            根据 ionic2 的设备制作响应式字体大小, 在 src/theme/variables.scss 中添加这个

            // breakpoint mixin
            @mixin breakpoint($mq01: 0, $mq2: false, $maxmin: max-width) {
              @if $mq2 == false {
                  @media ($maxmin: $mq01) {
                      @content;
                  }
              }
              @else {
                  @media (min-width: $mq01) and (max-width: $mq2) {
                      @content;
                  }
              }
            }
            
            // breakpoint variables
            $lg: 1170px;
            $md: 1024px;
            $sm: 640px;
            $xs: 480px;
            
            // responsive font size mixin
            @mixin font-size-map($font-size-map) {
                @each $breakpoint, $font-size in $font-size-map {
                    @if $breakpoint == null {
                        font-size: $font-size;
                    } @else {
                        @include breakpoint($breakpoint) {
                            font-size: $font-size;
                        }
                    }
                }
            }
            
            // font sizes
            
            $html-font-size: (null: 16px, $md: 15px, $sm: 14px, $xs: 13px);
            $paragraph-font-size: (null: 18px, $lg: 17px, $md: 16px, $sm: 15px, $xs: 14px);

            通过添加在本地 scss 中包含变量:@include font-size-map($html-font-size);

            // html
            
            html {
                @include font-size-map($html-font-size);
            }
            
            p {
                @include font-size-map($paragraph-font-size);
            }
            

            【讨论】:

              【解决方案7】:

              较新版本的 Ionic (4 + 5) 使用 CSS variables

              但是,字体大小没有变量。因此,您可以在variables.css 中添加这样的一行:

              body ion-content {
                font-size: 1.25rem;
              }
              

              进一步阅读

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 2020-07-28
                • 1970-01-01
                • 2012-05-06
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2013-01-06
                相关资源
                最近更新 更多