如何将字体大小设置为“更大”或系统默认值的 140%答案

【问题标题】：How to set font-size to "larger" or 140% of system default如何将字体大小设置为“更大”或系统默认值的 140%
【发布时间】：2021-07-31 09:37:09
【问题描述】：

我想为我的用户提供显示某些<Text/> 元素的可能性，其字体大小比系统默认值大。 documentation 仅提供该样式的编号。

我想显示带有 web-css“大”或“更大”值的文本，或者可能是 original 字体大小的 140%。

我发现了几个关于 SO 和 3rd 方库的问题，例如 responsive-fontsize，但它们似乎都与我无关。

做我想做的最简单的方法是什么？

【问题讨论】：

您能否详细说明为什么其他人不适合您的需求？

标签： javascript react-native font-size

【解决方案1】：

经过一些试验，我发现默认字体大小（如果未设置且至少对于 Android 而言）对应于 14。

从这个基础可以将大小增加到 18 以获得大约 140% 的原始大小。

好消息是字体会根据系统范围的字体大小进行缩放。

【讨论】：

【解决方案2】：

我将创建一个自定义的Text 组件，它将定义的 textSize 样式转换为调整后的比例。您可以从 Context-Provider、Redux 或 Recoil 等获得规模。

类似这样的东西（未经测试）：

export function MyText(props) {
  const { fontScale } = useContext(TextContext);

  return (
    <Text {...props} style={[...style, { fontSize: style.fontSize ? style.fontSize * fontScale : undefined }] />
  );
}

【讨论】：

【解决方案3】：

我认为您正在寻找的是PixelRatio，它可以让您更好地控制字体大小。否则它可以帮助到达您帖子的人。

PixelRatio 让您可以访问设备的像素密度和字体比例。

所以当你得到你想要的信息后，你就可以玩它了。

您可以在this answer找到示例

例如：

var React = require('react-native');

var {StyleSheet, PixelRatio} = React;

var FONT_BACK_LABEL   = 18;

if (PixelRatio.get() <= 2) {
  FONT_BACK_LABEL = 14;
}

var styles = StyleSheet.create({
  label: {
    fontSize: FONT_BACK_LABEL
  }
});

【讨论】：

【解决方案4】：

您可以使用 em 作为相对大小。

使用 em，您可以说出您希望文本放大或缩小多少倍。例如：

0.5em 将是初始大小的一半，1em 将是相同大小，2em 将是两倍大小。

<Text style={{fontSize: `${relativeSize}em`}}>
      I am {relativeSize} times bigger than I was supposed to be
</Text>

这是一个工作示例： https://snack.expo.io/@andrpr/bigger-text-example

如果您想使用百分比，您可以将它们转换为您希望文本的大小：

const percentage = 140;
const relativeSize = percentage/100;

https://snack.expo.io/@andrpr/percentage-bigger-text-example

【讨论】：

不适用于设备。抛出异常java.lang.String cannot be cast to java.lang.Double

【解决方案5】：

您为每个组件定义样式，例如您描述的<Text />。这是article
您可以将fontSize 设置为一种公式，例如：style={{fontSize: 10*1.4}} 或style={{fontSize: x*1.4}} 其中 x 是您的全局变量。

附：通常，你不能只在 %

中使字体变大

【讨论】：