微信小程序引入字体在部分机型失效不兼容解决办法

这篇具有很好参考价值的文章主要介绍了微信小程序引入字体在部分机型失效不兼容解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

写小程序页面,美工作图用了特殊字体

微信小程序引入字体在部分机型失效不兼容解决办法,微信小程序,微信小程序,小程序,跨域

引入代码:

@font-face {
  font-family: 'huxiaobo';
  src: url("https://xxxxxxxx.top/assets/fonts/huxiaobonanshenti.woff")
}
.font-loaded {
  font-family: "huxiaobo";
}

上线后发现部分安卓机型不兼容,查资料发现荣耀和vivo需要设置正确的CORS即可正常加载。

字体链接访问需满足浏览器同源策略,字体文件资源设置CORS的Access-Control-Allow-Origin为小程序域名:servicewechat.com或者*才可以

解决办法:

修改服务器nginx 配置,站点配置文件加入以下代码文章来源地址https://www.toymoban.com/news/detail-753888.html

location ~ .*\.(eot|otf|ttf|woff|woff2|svg)$
{
  add_header Access-Control-Allow-Origin *;
}

到了这里,关于微信小程序引入字体在部分机型失效不兼容解决办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序不同机型底部安全区域问题

    在微信小程序开发过程中,有些页面底部按钮是固定在底部的,还有如果是自定义tabbar也是需要固定在底部的,这里有两个问题: 不同机型的底部安全区域不同,如有些苹果手机底部有操作栏,这部分距离需要留出来否则会遮挡内容 如果底部有固定定位元素,可能会导致内

    2024年02月11日
    浏览(47)
  • 微信小程序 ---- iPhone X 以上机型留出底部安全距离

    在微信小程序设计按钮固定底部时,如果在编辑器使用的模拟器是iPhone X以下的机型时没有什么问题。 但是如果iPhone X以上的机型,会发现底部有黑条,会挡住按钮,而且操作不便。 所以我们要为底部按钮设置一个自适应高度,当机型为iPhone X以下或者安卓系统时,底边距离

    2024年02月15日
    浏览(39)
  • 微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配

    自定义微信小程序头部导航栏 自定义微信小程序头部导航栏,有几种方式 方式一 定义此方法后,头部的导航栏会去掉,导航栏下的元素会直接向上移动到原导航栏的位置,可以再app.json配置成全局沉浸式导航栏,以及在单页面配置沉浸式导航栏。 方式二 使用组件 这里使用

    2024年02月02日
    浏览(53)
  • 安卓应用无法拉起部分机型微信支付

    错误提示: 运行环境: Android 12 Pixel 3 错误分析: 开始以为是签名问题,或者debug签名被微信缓存了(原来遇到过这种情况,改了签名后不能马上支付,过一段时间又能用了) 等到第二天还是无法调起微信, 查阅资料才了解到:Android 11 版本为加强用户隐私保护引入较多变更

    2024年01月22日
    浏览(46)
  • 微信小程序字体大小

    微信小程序中可以使用以下CSS样式来设置字体大小: 在小程序中,可以直接在WXML文件和WXSS文件中使用这个样式。

    2024年01月21日
    浏览(51)
  • 微信小程序通用字体代码

    下面是一个简单的微信小程序通用字体代码示例: 在上面的代码示例中,我们首先在 app.wxss 中导入了一个名为fonts.wxss的文件,该文件用于定义所有页面中要使用的字体样式。在fonts.wxss中,我们使用 @font-face 规则来引入自定义字体文件(如font.ttf),并将其声明为 CustomFont 。

    2024年02月12日
    浏览(36)
  • 微信小程序自定义字体样式、字体修改、第三方字体设置

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月04日
    浏览(75)
  • 微信小程序中使用字体库_小程序使用自定义字体库

    一、使用前端字体库 小程序前端默认不支持woff2/woff文件加载。但浏览器支持base64编码图片解析。 处理方案蒋woff2转码成base64编码即可。 自定义前端库使用阿里iconfont的即可: iconfont-阿里巴巴矢量图标库 使用步骤如下: 1.下载字体库 2.引入css,文件名改成wxss 3.修改字体文件

    2024年02月09日
    浏览(49)
  • 微信小程序 - 使用第三方字体

    在微信小程序中,我们可以通过引入第三方字体来实现更加个性化和独特的文字效果。本文将详细介绍如何引入并使用第三方字体。 步骤一:选择字体文件 首先,我们需要选择一个适合的第三方字体文件。可以在网络上搜索并下载免费的字体文件,也可以购买商业字体。确

    2024年02月03日
    浏览(66)
  • 微信小程序:设置字体跟随手机系统

    小程序开发:全局设置跟随手机系统默认字体 最近在开发一款微信小程序,发现字体不是跟随手机系统设置的字体,这样对用户很不友好,通过下面这行代码,就可以将页面的字体搞成系统默认字体了。 提示:要设置在app.wxss里面 代码如下: 以上就是今天分享的内容啦~ ❤️

    2024年02月13日
    浏览(123)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包