在app.wxss引入外部字体, 报err_cache_miss错误
发布于 5 年前 作者 guiyingma 11921 次浏览 来自 问答

使用外部字体时,显示正常,但开发者工具客户端却报错

Failed to load font https://xxx/1.ttf

net::ERR_CACHE_MISS 

客户端用法:

在app.wxss引入外部字体,如下所示

@font-face {

    font-family: ‘MyFont’;

    src: url(https://xxx/1.ttf);

    font-weight: normal;

    font-style: normal;

}

腾讯云服务器用法:

服务器创建static目录,下面放静态文件1.ttf,通过中间件koa-static访问

请问怎样才能不报错。

1 回复

我也遇到了这个问题。找到了两种解决方案:

  1. 将字体文件转换成base64的css文件使用,但是体积会变大很多。(转换工具:https://transfonter.org/

  2. 使用loadFontFace这个api来加载外链图片。(文档参考:https://image.wxopen.club/content_e14acb2c-374a-11ea-b918-a0999b08aadb.png

我最后选的是方案2,使用成本低,而且不占用小程序包的大小。

回到顶部