收藏
回答

怎样引入外部字体样式

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

- 需求的场景描述(希望解决的问题)

引入外部字体样式


- 希望提供的能力


回答关注问题邀请回答
收藏

8 个回答

  • Saul
    Saul
    2018-04-12

    @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


    2018-04-12
    有用 1
    回复
  • 追小命
    追小命
    2018-04-12

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

    }



    2018-04-12
    有用
    回复
  • yiyi
    yiyi
    2018-04-12

    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';

    }




    2018-04-12
    有用
    回复
  • Saul
    Saul
    2018-04-12

    请提供代码片段。wxml、wxss

    2018-04-12
    有用
    回复
  • yiyi
    yiyi
    2018-04-12

    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)

    2018-04-12
    有用
    回复
  • Saul
    Saul
    2018-04-12

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

    2018-04-12
    有用
    回复
  • yiyi
    yiyi
    2018-04-12

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

    2018-04-12
    有用
    回复
  • Saul
    Saul
    2018-04-12

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


    2018-04-12
    有用
    回复
登录 后发表内容