[已解决]微信小程序定制怎样引入外部字体样式

时间：2019-05-04 来源：小程序工厂

问题模块框架类型问题类型终端类型微信版本基础库版本
框架微信小程序需求工具 6.3.3 v1.02.1803210

- 需求的场景描述（希望解决的问题）
引入外部字体样式

- 希望提供的能力

微信小程序开发问题解答

微信小程序开发者回答：

微信小程序貌似是不能直接引用文件的，无论是网络，下载，本地都不可以。直接url里base64 encode是可以的。但不建议这样去做中文字体，出于体积考虑。

我们的working code：

@font-face {
font-family: 'DIN';
src: url(data:application/font-woff;charset=utf-8;base64, ..............) format('woff');
font-weight: normal;
font-style: normal;
}

微信小程序开发者回答：

font.wxss:

@font-face {

font-family: 'duanningmaobixingsu';
src: url('duanningmaobixingsu.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

企业之家

/* pages/login/login.wxss */
@import "../../font.wxss";
.login-wrp {
margin-left: 5%;
margin-right: 5%;
}
.title {
font-family: 'duanningmaobixingsu';
}

微信小程序开发者回答：

@font-face { font-family: 'iconfont'; /* project id 218229 */ src: url('//at.alicdn.com/t/font_1oyoojup1w34bo6r.ttf') format('truetype')
}
.iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

wxml是这样

注意iconfont 是一定要加上去的

如果不行的话你去看下这个https://blog.csdn.net/zero_1996/article/details/73863334

微信小程序开发者回答：

请提供代码片段。wxml、wxss

微信小程序开发者回答：

VM19061:1 Thu Apr 12 2018 17:25:57 GMT+0800 (中国标准时间) 渲染层网络层错误
VM19061:2 Failed to load local font resource /pages/login/duanningmaobixingsu.ttf-do-not-use-local-path-./font.wxss&3&9
the server responded with a status of 404 (HTTP/1.1 404 Not Found)

微信小程序开发者回答：

@font-face{font-family:'yahei';src:url(../images/msyh.ttf); font-style:normal; font-weight:normal} 你可以试试这样

微信小程序开发者回答：

不可以呢，.ttf文件怎么用？

微信小程序开发者回答：

把css写在微信小程序里面的wxss 然后在你想用的页面的wxss上 @import "wxss路径";

本文网址：http://www.91bianli.com/weixinxiaochengxu/48763.html

上一篇：内存泄漏

下一篇：web-view 第一次打开提示未配置业务域名