网站开发和前端是一样吗,大理建设招标有限公司网站,重庆公司买深圳社保,网站做扫一扫浏览器在加载一个页面时#xff0c;会解析网页中的html和css#xff0c;并开始加载字体文件。字体文件可以通过css中的font-face规则指定#xff0c;并使用url()函数指定字体文件的路径。
比如下面这样:
css
font-face {font-family: MyFont;src: url(path/to/font.woff2…
浏览器在加载一个页面时会解析网页中的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标签的relpreload属性来预加载字体。
示例
html
link relpreload hreffont.woff2 asfont typefont/woff2 crossoriginanonymous
上面就是一个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中新增的属性老版本的浏览器可能不支持注意兼容性。如果你预加载的字体并没有得到使用那这样就会白白浪费性能并且控制台也会进行警告所以一定要注意字体的使用情况。 总结字体预加载有利有弊要慎用。
