css:网页引入字体@font-face以及动态加载字体
【摘要】
css:网页引入网络字体@font-face
<style >
/* 引入字体 */
@font-face {
font-family: "站酷高端黑 Regul...
css:网页引入网络字体@font-face
<style >
/* 引入字体 */
@font-face {
font-family: "站酷高端黑 Regular";
font-weight: 400;src: url("//at.alicdn.com/wf/webfont/CMLt9HVp5N87/tbHddmDWiU1GEuhi4nhKp.woff2") format("woff2"),
url("//at.alicdn.com/wf/webfont/CMLt9HVp5N87/WGIJOcs-yNAu59k-p4jVL.woff") format("woff");
font-display: swap;
}
/* 使用字体 */
.box{
font-family: "站酷高端黑 Regular";
}
</style>
说明
font-display 有五种属性:
auto:使用浏览器默认的行为;
block:浏览器首先使用隐形文字替代页面上的文字,并等待字体加载完成再显示;
swap:如果设定的字体还未可用,浏览器将首先使用备用字体显示,当设定的字体加载完成后替换备用字体;
fallback:与 swap 属性值行为上大致相同,但浏览器会给设定的字体设定加载的时间限制,一旦加载所需的时长大于这个限制,设定的字体将不会替换备用字体进行显示。 Webkit 和 Firefox 中设定此时间为 3s;
optional:使用此属性值时,如果设定的字体没有在限制时间内加载完成,当前页面将会一直使用备用字体,并且设定字体继续在后台进行加载,以便下一次浏览时可以直接使用设定的字体。
动态加载字体
async function loadFont(fontName, fontUrl) {
const font = new FontFace(fontName, `url(${fontUrl})`)
await font.load()
document.fonts.add(font)
}
文档:https://developer.mozilla.org/zh-CN/docs/Web/API/FontFace
Experimental: 这是一个实验中的功能
文章来源: pengshiyu.blog.csdn.net,作者:彭世瑜,版权归原作者所有,如需转载,请联系作者。
原文链接:pengshiyu.blog.csdn.net/article/details/126410418
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)