logo标签列表

如何在Ionic框架中自定义字体大小

cssfont-sizeionic-framework
15
我正在使用ionic框架（带cordova）开发移动应用程序。 我想做的是增加整个应用程序中的字体大小。
我看到了官方文档：http://ionicframework.com/tutorials/customizing-ionic-with-sass/。 但我不知道如何在sass起作用后自定义。
我正在制作一个基于选项卡的应用程序，就像这样：http://forum.ionicframework.com/uploads/default/269/9934610f0a08b8d2.png 我尝试手动添加选项卡上的类，但结果并不是很干净...文字被裁剪了...
有没有官方方法可以更改字体大小？
7个回答
24

我认为你不需要完全理解Sass的所有内容。 在你的项目目录中，

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

有一个名为_variables.scss的文件，在里面你会看到类似于这样的内容： enter image description here enter image description here 这些是字体大小变量，你只需要更改这些然后构建ionic css文件即可。 我建议你使用https://prepros.io/。希望这对你有所帮助。

7

分享一下我在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";语句之前写上面的语句。

保存文件，您的更改将立即生效。Ionic使它变得如此简单！！！ :)

7

搜索你的项目/www/css并编辑style.css，在文件内部编写：

{font-size:55px !important;}

将55px更改为您需要的任何大小。

2
为了使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);

通过添加：@include font-size-map($html-font-size);，可以将变量包含在本地scss中。
// html

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

p {
    @include font-size-map($paragraph-font-size);
}
2
通常您需要决定何时使用哪个图标大小，因此我想出了以下解决方案。
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>
0
-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
@psv你能贴一下你的代码或者元素检查截图吗？还要检查一下编辑。 - Mike K
使用“px”似乎不是一个好主意，推荐使用“em”。 - Ali Ghanavatian
最好使用SCSS变量来处理这样的事情。 - isherwood
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接