Angular 由一个bug说起之六:字体预加载

浏览器在加载一个页面时,会解析网页中的html和css,并开始加载字体文件。字体文件可以通过css中的@font-face规则指定,并使用url()函数指定字体文件的路径。

比如下面这样:

css

@font-face {font-family: 'MyFont';src: url('path/to/font.woff2') format('woff2'),url('path/to/font.woff') format('woff');
}body {font-family: 'MyFont', sans-serif;

但是在首次加载一个页面时,浏览器会根据css中字体的使用情况,来决定是否加载某个字体文件,而不是提前加载好。

这样就会有延迟,可能会带来一些问题,比如字体的延迟和闪烁。

像下面这样

一开始是一个字体,过了一会又变成别的字体。

那假如你在字体还没加载好的时候,就去获取字体的宽度,那这个时候的宽度就是不正确的,在做一些计算的时候,就没办法获得正确的值。

这个时候就可以用html中link标签的rel="preload"属性来预加载字体。

示例:

html

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

上面就是一个link标签,表示我们预加载了一个名为font.woff2的字体文件。其中,href属性指定了文件的路径,as属性指定了文件的类型,type属性指定了文件的MIME类型(浏览器会根据type 属性的值来确定是否支持该资源,如果不支持,则会忽略它,仅在支持时才会下载),crossorigin属性表示该资源是否应该使用一个CORS请求来获取(比如字体就需要使用CORS请求,因为字体可能来自不同的域,如果不设置此属性,浏览器将忽略预加载的字体), 并且该属性的值需要与资源的CORS和凭据模式相匹配,即使获取请求不跨域也需要设置。

crossorigin属性允许的值有两个:

1.anonymous(默认值)

请求使用了 CORS 标头,且证书标志被设置为 'same-origin'。没有通过 cookies、客户端 SSL 证书或 HTTP 认证交换用户凭据。

2.use-credentials

请求使用了 CORS 标头,且证书标志被设置为 'include'。总是包含用户凭据

使用预加载可以让字体文件在页面加载时被优先加载,以便在字体使用之前提前下载完成,这样就不会有延迟和闪烁了。

但是,在使用preload时,有两个点要注意一下:

  • rel preload属性是html5中新增的属性,老版本的浏览器可能不支持,注意兼容性。
  • 如果你预加载的字体并没有得到使用,那这样就会白白浪费性能,并且控制台也会进行警告,所以一定要注意字体的使用情况。

总结,字体预加载有利有弊,要慎用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/24171.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【路径规划】三维深度矩阵寻路算法

在三维空间中寻路相较于二维空间更为复杂&#xff0c;因为需要处理额外的维度。下面是一个示例&#xff0c;展示了如何使用深度优先搜索&#xff08;DFS&#xff09;算法在三维矩阵中寻找路径。 首先&#xff0c;我们需要定义三维矩阵&#xff0c;并编写一个递归的DFS函数来寻…

IDEA 中设置 jdk 的版本

本文介绍一下 IDEA 中设置 jdk 版本的步骤。 一共有三处需要配置。 第一处 File --> Project Structure Project 和 Modules 下都需要指定一下。 第二处 File --> Settings 第三处 运行时的配置

Linux基础2-基本指令4(cp,mv,cat,tac)

上篇文章我们说到了rmdir,rm,man,echo.重定向等知识。 Linux基础1-基本指令3-CSDN博客 本文继续梳理其他基础指令 1.本章重点 1.使用cp命令拷贝文件 2.使用mv命令移动文件 3.使用cat&#xff0c;tac查看小文本文件 2.cp命令 在linux中使用cp命令来拷贝粘贴文件 cp src(原文…

解决Nginx出现An error occurred问题

每个人遇到Nginx的An error occurred情况可能都不一样&#xff08;见图1&#xff09;&#xff0c;Nginx造成该错误的原因&#xff1a; 1. 我在配置域名解析成IP时&#xff0c;没有把所有解析配置都修改&#xff0c;见图2&#xff1a;解析 *.hanxiaozhang.xyz 配置的是新IP地…

【名词解释】Unity的Inputfield组件及其使用示例

Unity的InputField组件是一个UI元素&#xff0c;它允许用户在游戏或应用程序中输入文本。InputField通常用于创建表单、登录界面或任何需要用户输入文本的场景。它提供了多种功能&#xff0c;比如文本验证、占位符显示、输入限制等。 功能特点&#xff1a; 文本输入&#xff…

如何发布自己的npm插件包

随着JavaScript在前端和后端的广泛应用,npm(Node Package Manager)已成为JavaScript开发者不可或缺的工具之一。通过npm,开发者可以轻松共享和使用各种功能模块,极大地提高了开发效率。那么,如何将自己开发的功能模块发布为npm插件包,与全球的开发者共享呢?本文将进行全…

Nvidia Jetson/Orin/算能 +FPGA+AI大算力边缘计算盒子:潍柴雷沃智慧农业无人驾驶

潍柴雷沃智慧农业科技股份有限公司&#xff0c;是潍柴集团重要的战略业务单元&#xff0c;旗下收获机械、拖拉机等业务连续多年保持行业领先&#xff0c;是国内少数可以为现代农业提供全程机械化整体解决方案的品牌之一。潍柴集团完成对潍柴雷沃智慧农业战略重组后&#xff0c;…

JSON5:JSON的现代化扩展

JavaScript Object Notation (JSON)&#xff0c;被广泛应用于网络传输、配置文件等许多地方&#xff0c;因其简洁、易读的特性而备受欢迎。然而&#xff0c;JSON不是无可指摘的&#xff0c;限制太过严格&#xff0c;使得一些场景变得棘手。这时候&#xff0c;JSON的超集——JSO…

轻松解决问题!教你文件怎么解除只读模式!

在日常使用电脑时&#xff0c;我们有时会遇到文件或文件夹被设定为只读模式的情况&#xff0c;这可能会限制我们对文件的修改和编辑。然而&#xff0c;解除只读模式并获得文件的完全控制是一个相对简单的过程&#xff0c;只需要掌握一些基本的技巧和方法。在本文中&#xff0c;…

数据分析面试常问问题(二)(SQL、统计学、业务方面等)

一、数据分析之业务指标高频面试题 1.关于视频app&#xff08;比如爱奇艺&#xff09;首页推荐的推荐顺序&#xff0c;你会考虑哪些指标&#xff1f; &#xff08;1&#xff09;用户行为数据&#xff1a;浏览、点击、播放、搜索、收藏、点赞、转发、滑动、在某个位置的停留时…

java版spring cloud 知识付费平台的功能模块与子模块划分

随着互联网技术的飞速发展&#xff0c;知识付费平台已经成为了我国在线教育领域的一颗新星。这些平台以用户需求为出发点&#xff0c;围绕高质量的内容打造&#xff0c;利用互联网技术为用户提供了一个便捷、高效的学习环境。它们汇聚了丰富的专业知识&#xff0c;覆盖了职业技…

【时序约束】如何确定输入输出信号的时序约束值

确定输入输出信号的时序约束值是 FPGA 设计中的一个重要步骤&#xff0c;它涉及到对信号传输时间和 FPGA 内部时序要求的准确理解。以下是确定时序约束值的一些关键步骤&#xff1a; 1. 理解信号特性 输入信号&#xff1a;考虑输入信号的来源、传输距离、走线长度以及是否经过…

打造精美电子画册,提升企业形象的方法

在当今数字化时代&#xff0c;企业形象的表达方式正在发生深刻变革。精美电子画册作为一种新兴的传播媒介&#xff0c;不仅能够展现企业风采、提升品牌价值&#xff0c;还能够吸引潜在客户、增强市场竞争力。 接下来告诉大家一些简单的制作方法&#xff0c;可以收藏起来哦 1.首…

【免费】2021年数学建模国赛C题问题一--基于熵权法和TOPSIS法详细版附Word加代码

各位大佬好 &#xff0c;这里是阿川的博客&#xff0c;祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 Python 初阶 Python–语言基础与由来介绍 Python–…

刷代码随想录有感(95):合并区间

题干&#xff1a; 代码&#xff1a; class Solution { public:static bool cmp(vector<int>& a, vector<int>& b){return a[0] < b[0];}vector<vector<int>> merge(vector<vector<int>>& intervals) {sort(intervals.begi…

AO|天鹰优化算法原理及代码实现(MATLAB/Python)

文章来源于我的个人公众号&#xff1a;KAU的云实验台&#xff0c;主要更新智能优化算法的原理、应用、改进 天鹰优化算法(Aquila Optimizer&#xff0c;AO)是Abualigah等[1]于2021年发表在SCI二区Computers & Industrial Engineering的元启发式优化算法。该算法通过模拟天鹰…

从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战五(引入vue-router,并给注册功能加上美丽的外衣el-form)

安装vue-router pnpm install vue-router创建router src下新增router目录&#xff0c;ruoter目录中新增index.ts import { createRouter, createWebHashHistory } from "vue-router"; const routes [{path: "/",name: "Home",component: () …

git 的用法

git add&#xff1a;将工作区中 新建/修改/删除的文件内容&#xff0c;添加到暂存区。 参数列表 git add -A&#xff1a;提交所有变化&#xff08; -A --all &#xff09; git add -u&#xff1a;提交被修改&#xff08;modified&#xff09;和被删除&#xff08;deleted…

小红书的引流方式

常见的引流方法有&#xff1a;笔记引流、粉丝群聊引流、私信引流。 1、笔记引流 首先要明确你的目标受众是谁&#xff0c;通过他们的兴趣爱好和关注的信息来制定笔记内容计划&#xff0c;有利于我们选择合适的方式来吸引用户的关注。 然后就是优质的笔记内容了&#xff1b; …

使用git上传本地项目到远程仓库github上面

首先需要下载git 下载地址Git - Downloads (git-scm.com) 下载完成后 一、配置用户名和邮箱 #配置用户名 git config --global user.name "用户名" #配置邮箱 git config --global user.email "邮箱" 查询配置&#xff1a;$ git config --global …