ridonkulous大字体显示问题。 fontSize打破所有的字

Question

我正在编写一个JavaScript中的Lessig-Method slideware对象（这很有趣，不重要），而且我一直遇到奇怪的文本布局异常，我不能说我喜欢见过。然而，它们遍布我的幻灯片。

背景很简单。演示文稿包含幻灯片，幻灯片包含线条。一条线可能是一个词或短语，在我连接的图像中，幻灯片有三条线。

演示文稿“屏幕”是浏览器窗口的视口。每行的CSS line-height属性由视口高度除以行数计算。每行都是一个div，字体大小舒适地低于行高（90％，但设为px）。

一个漂亮的幻灯片看起来像此页面上的第一个： bbby.org/share/so_pics.html

（我可以只添加一个链接）。因为一切都基于视口尺寸进行计算，启动萤幕控制台或切换到全屏模式可调整所有尺寸（刷新时）。在某些情况下，一个单词的前一到三个字母会一直推到屏幕左侧，堆叠在一起。唯一不同的是我全屏并刷新了（并且新的尺寸已经计算出来）。

根据我设置的字体大小修改器（90％，80％，但在px中再次设置），它可能发生在常规视图（不是全屏）上。

有没有人见过这样的事情？

Answer 1

有趣的是，有吊牌的徽章。我不想看到这个网站成为我们评论发布的新的YouTube或故障博客。

除此之外，效果是可控的（尽管仍然没有解释）。通过脚本精细调整字体大小，我可以看到文字中的某些字母在什么时候分崩离析。

例如，在lineHeight = 269的div中，单词“right”中的字母“ri”如原始帖子中的fontSize> = 209所示飞走，但没有任何提示。单词“左”中的字母“l”具有更高的数字，可能增加，因为“f”也是高大的字母。

对于这个非常真实和令人不安的问题（tyvm）的当前一致的解决方法，我将fontSize属性设置为父容器上lineHeight的73％。