微信小程序使用其他字体

最新推荐文章于 2023-12-06 16:35:33 发布

夏同学vane

最新推荐文章于 2023-12-06 16:35:33 发布

阅读量1.1k

点赞数 1

分类专栏：记录文章文章标签：其他小程序前端

本文链接：https://blog.csdn.net/You_vane/article/details/120067712

版权

微信小程序不支持本地字体文件，但可以通过引用线上字体资源来实现。错误地在app.js全局使用可能导致问题，应按需在具体页面引入并使用。步骤包括下载字体文件并在页面中进行操作，虽然此方法较为基础，但对于需要自定义字体的小程序开发者可能有所帮助。

摘要由CSDN通过智能技术生成

小程序是不可以使用本地的字体的，以下是我的错误写法：

/* 字体部分 */
@font-face {
    font-family: "DIN-BLACK";
    src: url("../miniprogram/fonts/DIN-BLACK.OTF");
  }
@font-face {
    font-family: "DIN-BOLD";
    src: url("../miniprogram/fonts/DIN-BOLD.OTF");
  }
@font-face {
    font-family: "DIN-LIGHT";
    src: url("../miniprogram/fonts/DIN-LIGHT.OTF");
  }
@font-face {
    font-family: "DIN-MEDIUM";
    src: url("../miniprogram/fonts/DIN-MEDIUM.OTF");
  }

.font_DIN_BLACK{
    font-family: "DIN-BLACK";
}
.font_DIN_BOLD{
    font-family: "DIN-BOLD";
}
.font_DIN_LIGHT{
    font-family: "DIN-LIGHT";
}
.font_DIN_MEDIUM{
    font-family: "DIN-MEDIUM";
}

如果不是在小程序中在正常页面中直接使用下面的类就好，但小程序不行，这里我的方法是使用线上文字，操作如下：