如何將字體大小設置為“更大”或系統默認值的 140%

Question

我想為我的用戶提供一種顯示某些<Text/>元素的可能性，其字體大小比系統默認值大。 該文檔只為該樣式提供了一個編號。

我想顯示帶有 web-css“大”或“更大”值的文本，或者可能是原始字體大小的 140%。

我在 SO 和 3rd 方庫上發現了幾個問題，例如responsive-fontsize ，但它們似乎都與我無關。

做我想做的最簡單的方法是什么？

Answer 1

1. 您為每個組件定義 styles，例如您描述的<Text /> 。 這是一篇文章
2. 您可以將fontSize設置為一種公式，例如： style={{fontSize: 10*1.4}}或style={{fontSize: x*1.4}}其中 x 是您的全局變量。

PS 通常，您不能只以 % 為單位使字體變大

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 ，它可以讓您更好地控制 fonts 尺寸。 否則它可以幫助到達您帖子的人。

PixelRatio讓您可以訪問設備的像素密度和字體比例。

因此，在您獲得所需的信息后，您可以使用它。

您可以在此答案中找到示例

舉個例子：

 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% 的原始大小。

好消息是字體會根據系統范圍的字體大小進行縮放。