Angular：更改 IE11 用户的字体大小选项（CSS-变量）

Question

我正在开发 Angular 应用程序。在网页上，用户可以 select 小号、中号或大号字体（默认为中号），我们必须根据此更改整个页面的字体大小。现在对于其他浏览器，我可以使用 var() 但它与 IE 不兼容。因此，一种方法是使用 ngStyle 或 ngClass 在每个 HTML 标签中手动应用字体大小。但是我觉得这个方法真的很糟糕。还有另一种方法吗？我不想在每个组件中都写这段代码。

<div class="hm-header-title" [ngStyle]="fontSize()"></div>

fontSize(){
    return this.ieStyleService.fontSize() // ex return {'font-size': '11px'}
}

Answer 1

您可以使用 CSS or/and em/rem 的级联功能。

这个想法在理论上很简单（但在实践中可能需要一些返工）

定义正文font-size：

body{font-size: 16px;}

为您想要动态字体的元素定义 font-size，例如：

.lbl{font-size: 1rem}

现在，当你想改变标签的font-size时，你只需要改变正文的font-size 属性。其他一切都会自动完成。

请注意，您也可以使用浮点值来获得更好的结果：

.lbl {font-size: 1.33rem}

关于rem/em：

rem and em units are computed into pixel values by the browser, based on font sizes in your design. em units are based on the font size of the element they're used on. rem units are based on the font size of the HTML element. em units can be influenced by font size inheritance from any parent element

const $btn = document.getElementById("tgl");
$btn.addEventListener("click", () => {
  document.body.classList.toggle("large");
});

body {
  font-size: 16px;
}

body.large {
  font-size: 32px;
}

label {
  font-size: 1em;
}

<body>
    <label>I have dynamic font size</label>
    <button id="tgl">Toggle font size</button>
</body>

Answer 2

我没有尝试过以下内容，因为我认为 IE11“几乎死了”，现在我忽略它，因为我的目标受众受到相当的控制，我可以将他们从它转移开。

在你确实需要支持的情况下，我会尝试在应用程序的最顶部设置字体大小：

:host {
  font-size: 16px;
}

然后让你所有的 CSS 在整个应用程序中使用 rem（root em 单位）以便它们返回到 root 字体大小：

h1 {
  font-size: 1.2rem;
}

IE11 支持 rem: https://caniuse.com/rem

然后您需要更改根的 font-size，其他所有内容都将从中继承。类似于：

this.elementRef.nativeElement.style.setProperty('font-size', '12px');

甚至直接上DOM:

document.style.setProperty('font-size', '12px');

这些只是想法，很抱歉我没有时间进一步调查，但我希望它能让你继续前进。

Answer 3

尝试单独为 IE 手动应用它。

changeFontSize(fontSize){
    ieFontSizeClass=[
        '.someClass1 *',
        '.someClass2 *',
        ...
        ...
        ...
    ]

    if(this.isIE()){
        ieFontSizeClass.forEach((className: string) => {
                let elements = document.querySelectorAll(className) as NodeListOf<HTMLElement>;

                let i = 0;
                for (i = 0; i < elements.length; i++) {
                    elements[i].style.fontSize = fontSize;
                }
            });
    }
}

请注意，添加 * 很重要，因为它将应用于所有子元素。

Angular：更改 IE11 用户的字体大小选项（CSS-变量）

Angular: Change Font Size options for users in IE11 (CSS-Variables)

html

css

internet-explorer-11

css-variables

angular