android WebView停止使用设备字体设置并使用HTML中指定的样式

2ledvvac  于 2023-05-27  发布在  Android
关注(0)|答案(3)|浏览(117)

我有一个WebView显示的内容不受我控制。WebView内容是文件的预览,例如PowerPoint文档,或PDF文件,Word文档等。
当用户更改其设备上的字体大小时(* 设置->辅助功能->字体大小 *),WebView将使用此调整后的字体大小。这会导致WebView内容的布局错误,不再按设计对齐。一个例子是在我的PowerPoint演示文稿的预览中,文本现在被放大,因此它覆盖了文本右侧的图表,而其他文本则超出了幻灯片的边缘。

如何让WebView完全忽略任何系统字体设置,只使用HTML/CSS中为WebView中的内容指定的字体大小?

我在stack overflow上看到了很多关于如何将WebView中的字体设置为固定大小的评论,例如:

webView.getSettings().setTextSize(WebSettings.TextSize.NORMAL); // Deprecated
webView.getSettings().setTextZoom(100);

但我不想这么做。我希望字体大小由WebView中的HTML/CSS确定,我永远不会知道WebView的内容的值可以是任何东西。

y0u0uwnf

y0u0uwnf1#

“设置”中的字体大小设置会影响WebView的textZoom属性。请注意,当将此属性设置为最小文本时,它将大约为85。在最大的文本设置上,该值将在130左右。这些值可以在附加调试器并检查webView.getSettings().getTextZoom()值时找到
如果使用onlywebView.getSettings().setTextZoom(100);设置会将其强制返回到100,这也是标准值。你可能也在期待。尝试只使用此语句 * 而不 * 设置textSize。
(If这不工作,那么请提供可复制的例子。加载(PowerPoint)文件预览时,大文本设置显示不正确。)

vyswwuz2

vyswwuz22#

您可以在textZoom prop中设置此参数。
在Android上,如果未定义,textZoom将遵循系统字体缩放,因此,textZoom={100}将禁用缩放Web视图文本的系统字体缩放。从WebView文档:
如果用户在Android系统中设置了自定义字体大小,则WebView中的站点界面会出现不期望的缩放。
当设置标准textZoom(100)参数大小时,这种不良影响将消失。

<WebView textZoom={100} />

但通常设置最大缩放比完全禁用更好

这种缩放通常不是用户所不希望的:这通常是他们能够阅读所需要的。我们不应该覆盖用户可访问性设置超过严格必要的。
最好弄清楚在网页视图布局中断之前,您可以允许的最大字体缩放比例是多少,然后将其设置为最大值。在WebView中没有直接等价于<Text>maxFontSizeMultiplier prop,但是你可以像下面这样获得与maxFontSizeMultiplier相同的行为

import { PixelRatio } from 'react-native';

const maxTextZoom = 150; // Experiment and find the max you can allow here
const minTextZoom = 90; // You might not need this

export const SomeComponent = ({ ...webViewProps }) => {
  const textZoom = Math.max(minTextZoom,
    Math.min(maxTextZoom, PixelRatio.getFontScale() * 100)
  );

  return (
    <WebView textZoom={textZoom} {...webViewProps} />
  )
}
yrwegjxp

yrwegjxp3#

我今天也遇到了同样的问题,并完全解决了它使用@亚历克斯回答这个主题。您只需要设置webView.getSettings().setTextZoom(100);。它在2023年仍然有效!
不要使用其他文本大小配置类似webView.getSettings().setTextSize(WebSettings.TextSize.NORMAL);与上面的适当代码一起-否则它不起作用。更重要的是,setTextSize()现在已被弃用。

相关问题