怎样引入外部字体样式
发布于 6 年前 作者 fsu 5806 次浏览 来自 问答
  • 需求的场景描述(希望解决的问题)

引入外部字体样式

  • 希望提供的能力
8 回复

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)

不可以呢,.ttf文件怎么用?

@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是这样

<text class=“iconfont icon-shouye”></text>

注意iconfont 是一定要加上去的


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


请提供代码片段。wxml、wxss

小程序貌似是不能直接引用文件的,无论是网络,下载,本地都不可以。直接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.wxml–>

<view class=‘login-wrp flex-wrp’>

<view class=‘title’>企业之家</view>

</view>

/* pages/login/login.wxss */

@import “…//font.wxss;

.login-wrp {

   margin-left: 5%;

   margin-right: 5%;

}

.title {

   font-family: ‘duanningmaobixingsu’;

}

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

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

回到顶部