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 (将#修改为@）

css-transforms fonts fonts scale text-rendering

Css scale 使一些字体奇怪地调整大小，缺少字形/字符的部分

问题描述

解决方法

相关问答