网页字体文件最后再加载实现方法
网页字体文件最后再加载实现方法
吃猫的鱼Code
发布于 2023-08-15 15:34:50
发布于 2023-08-15 15:34:50
实现字体文件最后再加载
今天在优化主题的时候遇到的问题，发现字体文件的体积实在是太大了，即便是使用了cdn作为缓存，但是加载的时间还是过于久，会导致拖慢了全站的加载速度，于是便将字体样式通过异步加载的形式，让其不拖慢网站的加载速度。
实现
- 使用JavaScript动态加载字体：在页面的底部添加一个JavaScript脚本，在脚本中使用
@font-face规则动态创建一个新的</code>标签，并将字体文件链接放在其中。通过这种方式，字体文件将在页面的主要内容加载完毕后再加载。</li></ol><pre><code class="lang-js">// 创建一个新的<style>标签 var style = document.createElement('style'); // 将字体文件链接放在<style>标签中 style.textContent = ` @font-face { font-family: 'MyFont'; src: url(?developer/article/2312821/&) format('woff2'); } `; // 将<style>标签添加到页面的头部或尾部 document.head.appendChild(style); </code></pre><ol start="2"><li>使用JavaScript异步加载字体文件：在页面底部添加一个<code><script></code>标签，通过异步加载字体文件。可以使用<code>FontFace</code> API来实现异步加载字体文件。</li></ol><pre><code class="lang-js">// 异步加载字体文件 var myFont = new FontFace('MyFont', 'url(?developer/article/2312821/path/to/font.woff2) format("woff2")'); myFont.load().then(function(font) { // 字体加载完成后，将其应用于页面中的元素 document.fonts.add(font); });</code></pre><p>如果使用异步加载字体，确保在应用该字体的元素可见之前，字体已经加载完成。否则，在字体加载完成之前，元素可能会显示默认字体或闪烁。可以使用<code>font-display</code>属性来控制字体加载过程中的显示行为。</p> <br>
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023年08月14日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录