The background is straight-forward. Presentation has Slides, and Slides have Lines. A line, could be a word or a phrase, and in the images I'm linking, the slides have three Lines.
The presentation "screen" is the viewport of the browser window. The CSS line-height property of each Line is calculated by the viewport height divided by the number of lines. Each Line is a div with a font-size comfortably below the line-height (90%, but set in px).
A good looking slide looks like the first one on this page:
(I can add only one link).
Here's where it gets weird:
Because everything calculates based on the viewport size, having the firebug console up, or switching to full-screen mode adjusts everything's size (upon refresh). In some cases, the first one to three letters of a word pushes all the way to the left of the screen, stacking on top of each other. The only thing different is that I went fullscreen and refreshed (and new sizes were calc'd).
Depending on the font-size modifier I set (90%, 80%, but again set in px), it could happen on a regular view (not full screen).
Has anyone ever seen anything like this before?
以上就是ridonkulous large-font display issue. fontSize shatters words all over的详细内容，更多请关注web前端其它相关文章！