JS测试出最小支持字体,以及修复PDFJS的文本错误偏移

PDFJS的文本层有时会有一个错误的整体偏移,导致文本处于错误位置,导致用户选择错误的文本。

为什么会这样呢?其一,如果浏览器的文本缩放不是100%,而PDFJS没有检测这一点,导致文本排布发生偏移。安卓可以通过设置wv.getSettings().setTextZoom(100)来解决。

其二,浏览器有一个“最小支持字体”的限制,在chrome浏览器这是一个选项,虽然我从来没有设置过这个数值,但默认就是13px,小于这个值的font-size都是无效的。

chrome 设置 :
请添加图片描述
安卓webview也是可以设置的:

 wv.getSettings().setMinimumFontSize(1)

显示文本偏移(将透明文本层显示为半透明):
请添加图片描述
“修复”:将transform数值调小 ——
请添加图片描述
那如果不修改最小字体限制,要解决这个问题,必须测试出浏览器支持的最小字体,其实也很简单:

	var test = document.createElement('span'), sz = 25, min=sz
		, lastW, lastH;
	test.innerText='A';
	document.body.append(test);
	while(sz>=0) {
		test.style.fontSize=sz+'px';
		if(test.offsetWidth==lastW&&test.offsetHeight==lastH) {
			break;
		}
		lastH=test.offsetHeight;
		lastW=test.offsetWidth;
		min=sz;
		sz--;
	}
	
	console.log('最小字体是:'+min+'px')

似乎可以用上二分法搜索,不过还是算了吧。

更简单的方法(来自 Stack Overflow):

test.style.fontSize = '1px';
getComputedStyle(test).fontSize

不要忘了getComputedStyle,Javascript的火眼金睛,看穿css的画皮!

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值