css:网页引入字体@font-face以及动态加载字体

彭世瑜

已于 2022-08-18 17:33:34 修改

阅读量2.7k

点赞数 1

分类专栏： css 文章标签： firefox javascript 前端

于 2022-08-18 17:28:26 首次发布

本文为博主原创文章，欢迎转载，请注明出处

本文链接：https://blog.csdn.net/mouday/article/details/126410418

版权

css 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了如何通过CSS的@font-face规则来引入网络字体，并详细解析了font-display属性的五种设置：auto、block、swap、fallback和optional。font-display属性用于控制浏览器在字体加载期间如何显示文本，从而优化用户体验。同时，文章提供了一个示例，展示如何使用JavaScript的FontFace API动态加载字体。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
}