Question

我使用离子框架（使用cordova）开发移动应用程序。我想要做的是增加字体大小（通常在我的应用程序中）。

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

我在基于标签的应用中工作：http://forum.ionicframework.com/uploads/default/269/9934610f0a08b8d2.png 我试图在选项卡上手动添加一个类，但结果不是很干净......文本被裁剪......

是否有官方方式更改字体大小？

Answer 1

我认为你不需要在Sass上隐瞒一切。在项目目录中，在

中

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

有一个名为_variables.scss的文件，您可以在其中看到如下内容： enter image description here 这些是font-size变量，您只需要更改这些变量然后构建离子css文件。我建议你使用https://prepros.io/。我希望它对你有帮助。

Answer 2

想象一下，我分享了我在爱奥尼亚学到的东西。

基本上，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让它变得如此简单！：）

Answer 3

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

{font-size:55px !important;}

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

Answer 4

通常你想决定何时使用哪个图标大小，所以我提出了以下解决方案。

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>

Answer 5

根据ionic2的设备制作响应式字体大小，在src / theme / variables.scss

中添加

＆＃13;

// 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);

＆＃13;

通过添加以下内容在本地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);
}

Answer 6

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

然而，字体大小没有变量。因此，您可以将这样的行添加到 variables.css:

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

进一步阅读

Answer 7

我将Ionic用于我的应用程序，这就是我处理调整大小的方法：

找到您需要在CSS中修改的类/元素
设置padding:0 0 0 0;或您想要的值（顶部，右侧，底部，左侧）。
设置字体大小
设置身高
设置行高

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

.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;
}

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

7 个答案: