html5 css3简单小程序,微信小程序使用CSS3字体

@font-face是CSS3中的一个模块，它主要是把自己定义的Web字体嵌入到的网页中。

@font-face的语法规则：

@font-face {

font-family: ;

src: [][, []]*;

[font-weight: ];

[font-style:

}

IconFont(图标字体)是用字体来代替图标、图片文件的方法，通过IconFont可以对图标的大小、颜色等进行控制。微信小程序的wxss文件的font-face的url不接受http地址作为参数，但可以接受base64，需将图标字体文件转换为base64后引用。

可以从阿里巴巴图标库(http://www.iconfont.cn/)选择项目所需要的IconFont，并下载至本地。

解压下载文件

iconfont.css文件中有字体转换后的base64

.iconfont {

font-family:"iconfont" !important;

font-size:16px;

font-style:normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.icon-appreciate:before {

font-family: 'iconfont';

font-weight: normal;

font-style: normal;

content: "\e644";

}

.icon-check:before {

font-family: 'iconfont';

font-weight: normal;

font-style: normal;

content: "\e645";

}

使用IconFont

.icon {

font-family: 'iconfont';

font-weight: normal;

font-style: normal;

font-size: 40px;

color: #1AAD19

}

appreciate

check

参考资料

w3school 在线教程  CSS3 教程 | 菜鸟教程  阿里巴巴图标库  其他