添加允许更改整个应用程序字体大小的功能

编程问答 2022-05-29

问题描述

我需要开发一个功能，用户可以使用滑块将字体大小更改为小、中、大或超大。

@import '~@angular/material/theming';
/*
/// Returns a scaled typography config.
/// @param {number} $multiplicator
///   The typographic scale ratio
*/
@function scale-typography($multiplicator) {
  $custom-typography: mat-typography-config(
    $font-family:   'Roboto,"Helvetica Neue",sans-serif',$display-4:     mat-typography-level(calc(#{$multiplicator} * 112px)),$display-3:     mat-typography-level(calc(#{$multiplicator} * 56px)),$display-2:     mat-typography-level(calc(#{$multiplicator} * 45px)),$display-1:     mat-typography-level(calc(#{$multiplicator} * 34px)),$headline:      mat-typography-level(calc(#{$multiplicator} * 24px)),$title:         mat-typography-level(calc(#{$multiplicator} * 20px)),$subheading-2:  mat-typography-level(calc(#{$multiplicator} * 16px)),$subheading-1:  mat-typography-level(calc(#{$multiplicator} * 15px)),$body-2:        mat-typography-level(calc(#{$multiplicator} * 14px)),$body-1:        mat-typography-level(calc(#{$multiplicator} * 14px)),$caption:       mat-typography-level(calc(#{$multiplicator} * 12px)),$button:        mat-typography-level(calc(#{$multiplicator} * 14px)),// Line-height must be unit-less fraction of the font-size.
    $input:         mat-typography-level(inherit,1.125,400)
  );
  @return $custom-typography
};

@include mat-core();

$army-green: (
  300: #8a9743,500: #4b5320,contrast: (
    300: white,500: white
  )
);

/* ======== Angular material custom themes ======== */
$serum-primary: mat-palette($army-green,500);
$serum-accent: mat-palette($army-green,300);

$serum-theme: mat-dark-theme($serum-primary,$serum-accent);

@mixin mat-option-theme($serum-theme) {
  .mat-primary .mat-option {
    color: white;
  }

  .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
    color: mat-color(mat-palette($army-green,300));
  }
}

@include angular-material-theme($serum-theme);


/* ======== Customize fontsize mat slider component ======== */

.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
  background-color: #8a9743;
  border-color: #8a9743;
}

/* ======== Small font theme ======== */
$small-font-ratio: 0.8;
.small-theme {
  @include mat-base-typography(scale-typography($small-font-ratio));
  span.mat-caption.title {
    font-size: calc(#{$small-font-ratio} * 12px);
  }
  font-size: calc(#{$small-font-ratio} * 14px);
};

/* ======== Large font theme ======== */
$large-font-ratio: 1.2;
.large-theme {
  @include mat-base-typography(scale-typography($large-font-ratio),);
  span.mat-caption.title {
    font-size: calc(#{$large-font-ratio} * 12px);
  }
  font-size: calc(#{$large-font-ratio} * 14px);
};

/* ======== Xlarge font theme ======== */
$xlarge-font-ratio: 1.5;
.xlarge-theme {
  @include angular-material-typography(scale-typography($xlarge-font-ratio));
  span.mat-caption.title {
    font-size: calc(#{$xlarge-font-ratio} * 12px);
  }
  font-size: calc(#{$xlarge-font-ratio} * 14px);
}

当我尝试将 xlarge-theme 类添加到我的 app.component.html 中的 div 包装器时：

<div class="xlarge-theme">
....
</div>

，有些组件会增加字体大小，有些组件不会。我注意到应用了主题的组件从这个 xlarge-theme 类继承，而其他组件不从这个类继承。知道为什么会发生这种行为吗？

我是否也对这个功能采取了最好的方法？

谢谢，我已经坚持了一个多星期，试图了解幕后发生的事情，但我只使用了一个月的 angular，尽管浏览了网络上的不同文章，但我还是无法理解找不到任何可以帮助我的东西。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularangular-materialsasssassthemingtypography