qt 字体 qss加载字体_字体加载技术

柔光的暖阳◎ 2023-02-22 03:41 7阅读 0赞

qt 字体 qss加载字体

**This post is a work in progress and will be updated over time. Some techniques are browser-specific and experimental. Thank you for looking!**

**这篇文章正在进行中，会随着时间的推移而更新。** **一些技术是特定于浏览器的并且是实验性的。** **感谢您的光临！**

It seems as though most websites use non-default fonts these days and who can blame them?  System fonts are all pretty boring and custom fonts add a bit of flare and freshness to a site's design.  The problem with using custom fonts, however, is they can really slow down your site load.  Font files are large, can require separate font files for bold and italic, and can block rendering if the developer doesn't work around them.  Let me show you a strategy for faster font loading!

如今，大多数网站似乎都使用非默认字体，谁能责怪他们呢？ 系统字体非常无聊，自定义字体为网站的设计增添了耀眼的色彩和新鲜感。 但是，使用自定义字体的问题在于它们确实会减慢您的网站负载。 字体文件很大，可能需要单独的字体文件以粗体和斜体显示，并且如果开发人员无法解决这些问题，则可能会阻止渲染。 让我向您展示加快字体加载速度的策略！

## 1.将字体放在CDN上 **(**1. Put Fonts on CDN**)** ##

One simple solution for improving site speed is using a CDN, and that's no different for fonts.  It's important to ensure the CDN has proper CORS settings, as I discussed in [Service Fonts from CDN][]:

一种提高站点速度的简单解决方案是使用CDN，字体也不例外。 正如我在[CDN的服务字体中所][Service Fonts from CDN]讨论的那样，确保CDN具有正确的CORS设置非常重要：

# Apache config
    <FilesMatch ".(eot|ttf|otf|woff)">
    	Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
    
    # nginx config
    if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    	add_header Access-Control-Allow-Origin *;
    }

You'll see AJAX / cross-domain errors in the console if the CDN's CORS settings are not properly configured.

如果未正确配置CDN的CORS设置，您将在控制台中看到AJAX /跨域错误。

## 2.使用非阻塞CSS加载 **(**2.  Use Non-Blocking CSS Loading**)** ##

My Mozilla colleague Stephanie Hobson shared [Loading CSS without blocking render][] with me, which outlines a strategy for preventing CSS loading from blocking render.  It's actually genius:

我的Mozilla同事Stephanie Hobson与我分享了“在[不阻止渲染的情况下加载CSS”][Loading CSS without blocking render] ，其中概述了防止CSS加载阻止渲染的策略。 实际上是天才：

Essentially using `media=none` let's the browser download the stylesheet without blocking rendering, so when the stylesheet has loaded, setting the `media` to its desired setting will then render the screen as it should.  Nice!

实质上，使用`media=none`让浏览器下载样式表而不阻止渲染，因此，在加载样式表后，将`media`设置为所需的设置即可按需渲染屏幕。 真好！

*Note: I've had a few issues with this technique within Firefox but I've not yet figured out the exact reasoning for it, as sometimes no issue occurs. Read [Keith Clark's post][Loading CSS without blocking render] for precise details and support.*

*注意：我在Firefox中使用此技术遇到了一些问题，但是由于有时没有问题，因此我还没有弄清楚它的确切原因。* *阅读[Keith Clark的帖子][Loading CSS without blocking render]以获取准确的详细信息和支持。*

## 3.单独的字体选择器 **(**3.  Separate Font Selectors**)** ##

If a font hasn't loaded by the time it's used, the user will see (nothing, kind of) empty space until the font has loaded.  This is, of course, not good if the fonts fail to load.  At the very least, the user will be burdened with staring at empty space for a few seconds.  What's best is keeping custom font declarations protected with a class that is added to the body after the fonts have loaded:

如果字体在使用时尚未加载，则用户将看到(什么也没有)空白，直到字体加载完毕。 如果字体无法加载，这当然不是很好。 至少，用户会被盯着空的空间持续几秒钟。 最好的办法是使用在字体加载后添加到正文中的类来保护自定义字体声明：

h1 { font-family: Arial, serif; } /* basic system font */
    .fontsloaded h1 { font-family:  'MySpecialFont', serif; } /* custom system font */

By using the font declaration strategy above, a system font is loaded initially and only after the custom font is loaded will it be enabled, thus the screen wont show empty content for any period of time.  I recommend creating a Stylus/Sass/Less mixin to set the `font-family` settings so that the custom selector is automatically set.

通过使用上面的字体声明策略，系统会首先加载系统字体，并且只有在加载自定义字体后才会启用它，因此屏幕在任何时间段内都不会显示空白内容。  我建议创建一个Stylus / Sass / Less mixin来设置`font-family`设置，以便自动设置自定义选择器。

Scott Jehl describes that font load events are much more effective in his post [Font Loading Revisited with Font Events][]. Please read it!

Scott Jehl在他的[“通过Font Events重访字体加载”一][Font Loading Revisited with Font Events]书中描述了字体加载事件更有效。 请阅读！

## 4.将字体存储在localStorage中 **(**4. Storing Fonts in localStorage**)** ##

Did you know you can store fonts in localStorage?! Crazy, right?! Check out [this post][] which details the process and even provides the code to do it!

您知道可以将字体存储在localStorage吗？ 疯狂吧？ 查看[这篇文章][this post] ，其中详细介绍了该过程，甚至提供了执行该过程的代码！

Speed kills on the web and the strategies provided above will supercharge your custom font loading and CSS speed.  The solutions are all easy to implement, you just need to take the time!

网络上的速度杀手，上面提供的策略将增强自定义字体加载和CSS速度。 解决方案都很容易实现，您只需要花些时间！

> 翻译自: [https://davidwalsh.name/font-loading][https_davidwalsh.name_font-loading]

qt 字体 qss加载字体

[Service Fonts from CDN]: https://davidwalsh.name/cdn-fonts
[Loading CSS without blocking render]: http://keithclark.co.uk/articles/loading-css-without-blocking-render/
[Font Loading Revisited with Font Events]: http://www.filamentgroup.com/lab/font-events.html
[this post]: http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage
[https_davidwalsh.name_font-loading]: https://davidwalsh.name/font-loading