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％。