代码之家 › 专栏 › 技术社区 › injecteer

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

font-size react-native

0

injecteer · 技术社区 · 5 年前

我想为我的用户提供一种可能,显示某些 <Text/> 字体大小大于系统默认值的元素。这个 documentation 仅为该样式提供一个数字。

我想用web css“大”或“大”值显示文本,或者可能显示140%的文本 起初的 字体大小。

我在SO和第三方LIB上发现了几个问题,比如 responsive-fontsize ,但它们似乎都与我无关。

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

0 回复 | 直到 5 年前

1

ChilTest 5 年前

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

附言:通常情况下,你不能把字体放大到%

2

1

Andr 5 年前

你可以用它们来表示相对大小。

有了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

3

1

crg ali 5 年前

我想你要找的是 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

1

Christian 5 年前

我会创建一个自定义 Text 将定义的textSize样式转换为调整比例的组件。可以从上下文提供程序、Redux或Recoil等获取的比例。

类似这样(未经测试):

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

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

5

0

injecteer 5 年前

经过一些实验,我发现默认的字体大小——如果没有设置,至少对于Android来说——对应于 14 .

从这个基础上,我们可以将尺寸增加到18,得到原始尺寸的大约140%。

好的是,字体的大小取决于系统范围的字体大小。