TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

How to avoid layout shifts caused by web fonts

192 点作者 joshbetz超过 3 年前

14 条评论

divbzero超过 3 年前
The suggestion I like the most is <i>3.4) Use system fonts</i>:<p><pre><code> body { font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Roboto&quot;, &quot;Oxygen&quot;, &quot;Ubuntu&quot;, &quot;Cantarell&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; } </code></pre> Stack Overflow took this approach last year with the following font stack: [1]<p><pre><code> @ff-sans: system-ui, -apple-system, BlinkMacSystemFont, &#x2F;&#x2F; San Francisco on macOS and iOS &quot;Segoe UI&quot;, &#x2F;&#x2F; Windows &quot;Ubuntu&quot;, &#x2F;&#x2F; Ubuntu &quot;Roboto&quot;, &quot;Noto Sans&quot;, &quot;Droid Sans&quot;, &#x2F;&#x2F; Chrome OS and Android with fallbacks sans-serif; &#x2F;&#x2F; The final fallback for rendering in sans-serif. @ff-serif: Georgia, Cambria, &quot;Times New Roman&quot;, Times, serif; @ff-mono: ui-monospace, &#x2F;&#x2F; San Francisco Mono on macOS and iOS &quot;Cascadia Mono&quot;, &quot;Segoe UI Mono&quot;, &#x2F;&#x2F; Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas &quot;Ubuntu Mono&quot;, &#x2F;&#x2F; Ubuntu &quot;Roboto Mono&quot;, &#x2F;&#x2F; Chrome OS and Android Menlo, Monaco, Consolas, &#x2F;&#x2F; A few sensible system font choices monospace; &#x2F;&#x2F; The final fallback for rendering in monospace. </code></pre> [1]: <a href="https:&#x2F;&#x2F;meta.stackexchange.com&#x2F;questions&#x2F;364048&#x2F;we-are-switching-to-system-fonts-on-may-10-2021" rel="nofollow">https:&#x2F;&#x2F;meta.stackexchange.com&#x2F;questions&#x2F;364048&#x2F;we-are-switc...</a>
评论 #30136691 未加载
评论 #30135742 未加载
评论 #30135748 未加载
评论 #30136931 未加载
评论 #30137879 未加载
评论 #30137973 未加载
wakeupcall超过 3 年前
I just disable webfonts by default myself. I wonder how common that is. I never felt that I missed anything, because let&#x27;s face it: in 99% of the cases you jump on a website through search and leave it within 60 seconds.<p>I make exceptions for websites that I visit regularly, where the most frequent breakage is a custom font that packs icons. On websites that I frequently read for documentation I sometimes even swap the font to something that I prefer (by injecting a @font-face src:local rule).<p>Designer&#x27;s choice of fonts are frequently lower in legibility and&#x2F;or do not have good hinting (not at the same level of most system fonts). On non-retina displays the qualitative difference is sometimes staggering.
评论 #30135861 未加载
mattbee超过 3 年前
He forgot one: inline the font data (evil cackle).<p>This made sense for me in conjunction with subsetting for a stopwatch app that only needs 10 digits and a colon.<p>I submit it&#x27;s not so bad if you inline it with the rest of your styling, at least that&#x27;s cacheable separate from the content.
评论 #30135682 未加载
jurnalanas超过 3 年前
You can use a library to take care a lot of FOUT versus FOIT experience. Face Observer (<a href="https:&#x2F;&#x2F;fontfaceobserver.com" rel="nofollow">https:&#x2F;&#x2F;fontfaceobserver.com</a>) lets you wait for the web fonts to load, then responds accordingly.<p><pre><code> var html = document.documentElement; var script = document.createElement(&quot;script&quot;); script.src = &quot;fontfaceobserver.js&quot;; script.async = true; script.onload = function () { var roboto = new FontFaceObserver(&quot;Roboto&quot;); var sansita = new FontFaceObserver(&quot;Sansita&quot;); var timeout = 2000; Promise.all([ roboto.load(null, timeout), sansita.load(null, timeout) ]).then(function () { html.classList.add(&quot;fonts-loaded&quot;); }).catch(function (e) { html.classList.add(&quot;fonts-failed&quot;); }); }; document.head.appendChild(script);</code></pre>
评论 #30160003 未加载
KronisLV超过 3 年前
&gt; Downloading one or two font files to render text won’t have a massive impact on speed, downloading five or ten font files will!<p>I wonder why we almost never talk about the actual filesizes of different fonts and which ones take less space, for when the total size of our webpages is important and we&#x27;d like to make our font choices with that in mind, provided that we don&#x27;t want to just use the system fonts for whatever reason.<p>For example, i described some of the specifics of serving my own fonts on my site instead of using Google Fonts in a discussion about privacy some time back: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=29996364" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=29996364</a><p>The question that i posed in that comment still hasn&#x27;t really been answered and is still relevant in my eyes:<p>&gt; While we&#x27;re on the topic of fonts, it&#x27;s a shame that we don&#x27;t think more about how heavy the fonts we choose to use are, since right now serving my own fonts eats up around half of the bandwidth on my non-image-heavy site. The single article that i&#x27;ve found on the topic so far as been this, &quot;Smallest (file size) Google Web Fonts&quot;: <a href="http:&#x2F;&#x2F;www.oxfordshireweb.com&#x2F;smallest-file-size-google-web-fonts&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.oxfordshireweb.com&#x2F;smallest-file-size-google-web-...</a><p>Why doesn&#x27;t Google Fonts have a field somewhere that&#x27;d show the total size of a font in any number of supported file formats? Why do we have so much effort towards optimizing the sizes of images, and yet fonts don&#x27;t get the same love?
评论 #30135632 未加载
评论 #30141895 未加载
lelandfe超过 3 年前
&gt; <i>Preloaded fonts delay main JS bundle</i><p>Am I crazy or does that waterfall pretty clearly show nothing of the sort? When using http&#x2F;2, a reasonable amount of preloaded assets won’t block anything else in the critical path…
cblconfederate超过 3 年前
Just use system fonts. Except on android, it&#x27;s only roboto<p>And do use verdana, it&#x27;s the most readable font. Admit it, you like it here
hawski超过 3 年前
How to avoid layout shifts caused by CSS loading.<p>How to avoid layout shifts caused by images.<p>How to avoid layout shifts caused by ads.<p>How to avoid layout shifts caused by DOM changes.<p>It is funny how as many things moved to web we still have those basic issues, that would be considered show stopper errors in a desktop app.<p>Sometimes I would like for the browser to keep the state from 0.2 second ago when I decided to tap or click and do something like nothing did change in this time.
评论 #30137242 未加载
评论 #30138003 未加载
logifail超过 3 年前
With the default settings I find this web page almost impossible to read (with my glasses on). The font is [too] small and the contrast is poor.<p>&quot;Avoiding layout shifts caused by web fonts&quot; is a great topic.<p>&quot;Readability&quot; would be another one.
tacone超过 3 年前
If OS makers reached some kind of agreement to incorporate the most used 20 web fonts in their OS, 99% of this madness would be gone.
评论 #30137042 未加载
评论 #30138326 未加载
jesprenj超过 3 年前
Ironically, this website&#x27;s heading shifted it&#x27;s layout after the new font loaded (:
donatj超过 3 年前
1. Don’t use web fonts.<p>2. There is no step 2<p>They just slow the web down and often make things less legible in the name of style.
togaen超过 3 年前
Easy: don’t use them. They are a waste of time anyway. I promise you your users care 0% about whether your font is “just right” or not.
评论 #30135953 未加载
评论 #30137577 未加载
tomcooks超过 3 年前
&gt; Most designers will cringe at the thought of showing users a fallback system font.<p>Explaining them that web is not paper, helps removing a lot of this childish behaviour.
评论 #30135284 未加载
评论 #30135357 未加载
评论 #30135516 未加载
评论 #30135692 未加载
评论 #30135159 未加载
评论 #30135222 未加载
评论 #30137598 未加载
评论 #30135378 未加载