美文网首页
修改页面字体

修改页面字体

作者: 小程序前端超市 | 来源:发表于2019-05-22 17:28 被阅读0次

    首选通过document.fonts来加载字体文件,再给html加个class

    if("fonts" in document) {
        document.fonts.load("1em SourceHanSansCN");
        document.fonts.ready.then(function(fontFaceSet){ 
            document.documentElement.className += "sj-font-family"; 
        });
    }
    

    document.fonts介绍:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/fonts

    然后在css文件里也引入字体,设置样式

    @font-face{
        font-family: SourceHanSansCN;
        src:url(font/SourceHanSansCN/SourceHanSansCN-Light.otf);
        font-display: swap;
    }
    .sj-font-family body{font-family:"SourceHanSansCN";}
    

    写到最后,欢迎关注作者:http://fenxianglu.cn/

    相关文章

      网友评论

          本文标题:修改页面字体

          本文链接:https://www.haomeiwen.com/subject/hgguzqtx.html