如何将字体大小设置为 "larger" 或系统默认值的 140%

Question

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

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

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

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

Answer 1

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

P.S。通常，你不能只在 %

中使字体变大

Answer 2

您可以使用 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

Answer 3

我认为您正在寻找的是 PixelRatio，它可以让您更好地控制字体大小。或者它可以帮助达到您 post.

的人

PixelRatio gives you access to the device's pixel density and font scale.

所以在你得到你想要的信息后你可以玩它。

您可以在 this answer

上找到示例

For exemple :

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

Answer 4

我将创建一个自定义 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 }] />
  );
}

Answer 5

经过一些试验，我发现默认字体大小 - 如果未设置并且至少 Android - 对应于 14.

从该基数开始，可以将大小增加到 18，以获得原始大小的大约 140%。

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

如何将字体大小设置为 "larger" 或系统默认值的 140%

How to set font-size to "larger" or 140% of system default

javascript

react-native

font-size