在角度上全局更改字体大小？答案

【问题标题】：Change font size globally on angular?在角度上全局更改字体大小？
【发布时间】：2023-01-19 21:13:23
【问题描述】：

我有一个角度项目，它基本上显示一个页面，其中包含要做的事情列表（基本上是一个更详细的待办事项列表）。它显示的屏幕可以改变，因为它被认为是在大显示器甚至电视上显示，而且众所周知，它们的尺寸可能不同。

问题是字体大小对于某些屏幕来说可能太小了，所以我需要做一个选项，允许用户更改所有应用程序的字体大小。我想用下拉列表来做，但我真的不知道如何更改每个文本的字体大小，因为它们有不同的类。我想使文本大小按百分比变化，这样它就不会搞砸默认情况下应具有的字体大小（例如，一列的文本大小可能比另一列小，并且这需要保持真实，但我需要能够按比例更改大小）。

【问题讨论】：

用户可以在浏览器中更改字体大小。如果您在整个应用程序中使用 rem，则您正在设置字体之间的相对大小。
正如 will 所说，您应该使用相对单位，如 rem 作为您的字体大小，然后您可以使用媒体查询来更改不同尺寸屏幕的基本字体大小

标签： css angular

【解决方案1】：

您可以为字体大小使用一个 css 变量，并从 js 更改它：

<script>
// Get the root element
var r = document.querySelector(':root');

// Create a function for getting a variable value
function myFunction_get() {
  // Get the styles (properties and values) for the root
  var rs = getComputedStyle(r);
  // Alert the value of the --blue variable
  alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}

// Create a function for setting a variable value
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

【讨论】：

【解决方案2】：

在你的 styles.css 文件中添加

    html { 
        font-size : 62.5%;
        }

这将设置 1 rem = 10px（默认 1rem = 16px）

现在以 rems 定义角度项目中的所有单位。要在 styles.css 中的某个屏幕宽度处更改字体大小，请添加一个具有宽度的媒体查询，并在 html 中将字体大小更改为类似 font-size: 50% 的内容，这将影响整个应用程序。

每当用户更改浏览器的字体大小时，更改也会反映出来。

【讨论】：