如何解决Css scale 使一些字体奇怪地调整大小，缺少字形/字符的部分
我正在为 epub 查看器开发一个网络应用程序。在该查看器中，其中一项功能是缩放页面，以便读者可以更好地阅读文本。
我现在正在做的是创建一个 scaleContainer div（或只是主体）并将所有 epub 内容放在那里，同时尊重 epub 具有的原始 css 样式。然后我在 0,0 的左上角使用 css 变换原点，并以缩放因子进行缩放。
对于一小部分字体，字体渲染时缺少字符的部分。
这是 1.9 的缩放比例，看起来很正常 [1]：https://i.stack.imgur.com/j0Hsv.png
这是 2.0 的缩放比例，看起来真的一团糟 [2]：https://i.stack.imgur.com/LOYfK.png
如果您在比例 2.0 的图像中查看字符 'd' 和 's' 和 'g'，则字体的某些部分会丢失。
有人知道如何解决这个问题吗？ 谢谢。
编辑
对于我尝试做的最简单的形式，可以重现这种行为：
<!DOCTYPE html>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test page</title>
<style>
@font-face {
font-family: "Akzigbql";
src: url(fonts/Akzigbql.ttf);
}
p.copyright {
font-size: 0.8em;
line-height: 1.3em;
text-align: center;
text-indent: 0px;
margin-top: 0px;
margin-bottom: 0px;
font-family: "Akzigbql";
}
</style>
</head>
<body>
<div id="scaleContainer">
<p class="copyright">a division of Holtzbrinck Publishing Holdings Limited Partnership</p>
</div>
<script>
let scaleFactor = 2
let scaleContainer = document.querySelector('#scaleContainer')
scaleContainer.style.transformOrigin = 'top left';
scaleContainer.style.transform = `scale(${scaleFactor})`;
</script>
</body>
</html>
字体
我不确定发布字体是否合法……但如果有问题，我会删除它： https://mega.nz/folder/YHJ0mZ7T#e3SBf8VQwlzCr22UrymlJA
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。