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

How to customize font size in Ionic Framework

提问by psv

I'm using ionic framework (with cordova) to develop mobile apps. What I want to do is to increase the font size (in general in my app).

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

I've seen that in the official documentation : http://ionicframework.com/tutorials/customizing-ionic-with-sass/. But I do not understand how to customize once sass is working.

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

I'm working in a tabs-based App like that : http://forum.ionicframework.com/uploads/default/269/9934610f0a08b8d2.pngI tried to manually add a class on the tab, but the result is not very clean... the text is cropped...

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

Is there an official way to change the font-size ?

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

回答by luharanu

I think you don't need to undersand everything on Sass. In your project directory, in

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

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

There is a file named _variables.scsswhere you will see something like this : These are font-size variables, you just have to change these and then build the ionic css file. I suggest you to use https://prepros.io/. I hope it helped you.

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

回答by mutp

Figured I'd share what I've learnt in Ionic.

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

Basically, Ionic has a default set of sizes, colors, fonts for every single thing you can design and this set is stored in the _variables.scss file. This file is at lib/ionic/scss/_variables.scss

基本上，Ionic 有一组默认的大小、颜色、字体，用于您可以设计的每个事物，并且该组存储在 _variables.scss 文件中。该文件位于 lib/ionic/scss/_variables.scss

Open this file and search for what you want to alter. For example, I needed to increase the header font-size. So I searched in the _variables.scss file and found $bar-title-font-size.

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

It was defined as $bar-title-font-size: 17px !default;

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

Now, open your ionic.app.scss file and write something like

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

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

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

***Remember to write the above statement before the @import "ionic/scss/ionic";statement.

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

Save the file and your changes will instantly take effect. Ionic has made it that simple!!! :)

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

回答by user5195107

Search your project/www/css and edit style.css, and inside the file write:

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

{font-size:55px !important;}

change 55pxto whatever size you need.

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

回答by pavanidasari

To make responsive font-size according to device for ionic2, Add this in src/theme/variables.scss

要根据 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 variable in local scss by adding: @include font-size-map($html-font-size);

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

回答by Hexodus

Often you want to decide when to use which icon size so I came up with the following solution.

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

CSS

CSS

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

HTML

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>

回答by Mike K

I use Ionic for my apps and this is how I deal with resizing:

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

1. Find the class/element that you need to modify in CSS
2. Set padding:0 0 0 0;or to values you want (top,right,bottom,left).
3. Set font size
4. Set height
5. Set line-height

1. 在 CSS 中找到需要修改的类/元素
2. 将padding:0 0 0 0;或设置为您想要的值（顶部、右侧、底部、左侧）。
3. 设置字体大小
4. 设置高度
5. 设置行高

Edit: This is how I modified my tab items

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

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