weex用阿里矢量图

首先这段代码来自 zwwill在github上的 weex网易严选项目

他是在utils下封装了一个方法

let utilFunc = {
    initIconFont () {
        let domModule = weex.requireModule(‘dom‘);
        domModule.addRule(‘fontFace‘, {
            ‘fontFamily‘: "iconfont",
            ‘src‘: "url(‘http://at.alicdn.com/t/font_630973_b31no0qq0nt57b9.ttf‘)"
        });
    }
}

通过  dom模块的 addRule方法

能够在html的中添加代码

字体图标有很多文件,ttf,eof,svg,woff

但是只加载这个 ttf 就能出现效果了

执行 initIconFont 之后 就在html中添加了一下代码

@font-face {
  font-family: ‘iconfont‘;  /* project id 630973 */
  url(‘//at.alicdn.com/t/font_630973_b31no0qq0nt57b9.ttf‘) format(‘truetype‘)
}

然后字体图标就生效了

注意:字体图标的链接记得改成自己的。

原文地址:https://www.cnblogs.com/anxiaoyu/p/8869707.html

时间: 2024-08-30 10:34:20

weex用阿里矢量图的相关文章

阿里矢量图的应用--flex布局--vue中$router和$route的方法

1.阿里矢量图字体图标的用法 2.flex布局 display:flex:设置父容器为伸缩盒子,会使每一个子元素自动变成伸缩项 接着设置子元素主轴方向上的排列方式 justify-content: flex-start让子元素从父容器的起始位置开始排列: flex-end:让子元素从父容器的结束位置开始排列: ? center:让子元素从父容器的中间位置开始排列: ? space-between:左右对齐父容器的开始和结束,中间平均分页,产生相同的间距: ? space-around:将多余的空

阿里矢量图怎么用(转)

一.准备工作 1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源,然后直接下载使用,或者建立图标库然后再使用,例如这里以删除的图标为例 a) 搜索删除图标 b) 选择需要的图标,然后可以执行三种操作:添加入库.收藏或者直接下载,可以根据自己的实际情况来选择相应操作,这里选择添加入库,操作完可以看到图标已经添加进右上角的购物车里了 c) 点击右上角的购物车,可以看到

jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验

jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验 一丶bootstrap的使用 下载资源文件: bootstrap官网 导入 // 1.导入样式 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> // 2.导入bootstrap的js,依赖jquery,先导入jquer <script

如何制作行政区划矢量图(shp格式)

有时候想要一张shp格式的地方行政区划矢量图,但苦于网络资源有限,找得到的可能不够满足需求,更多时候是难以找到,这时唯有自力更生了!下面我将分享一种方法,通过用GIS软件创建shapefile文件并进行编辑描边,以达到目的. 工具/原料 ARCGIS10.2 行政区划图.jpg 添加图片 1 文件不能直接"打开".开启GIS后,选择标准工具条里的黑十字形图标,弹出"添加数据"对话框,找到你的图片并点击"添加",以此在软件添加图片. 2 在添加过程

MATLAB GUI 程序设计中将axes保存为矢量图的方法

MATLAB进行GUI程序设计时,一个figure中通常包含多个axes控件. 保存矢量图的常用指令saveas和print只能以figure为单位保存图片,而不能将figure中的某一个axes单独保存. 而getframe+imwrite的方法虽然可以保存axes,但只能保存为位图,不能保存为矢量图,必定造成图像细节信息丢失. 下面给出一种解决方案. 创建一个新的.不可见的figure和axes,将要保存的axes内容复制至新的axes中,并保存新的figure. 由于新的figure中只有

初识SVG矢量图

一:什么是SVG以及的特点 (1)SVG指可伸缩矢量图形(Scalable Vector Graphics) (2)SVG 用来定义用于网络的基于矢量的图形 (3)SVG 使用 XML 格式定义图形 (4)SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 二:SVG之HelloWorld 像学习每一门语言一样,我们来写一个最简单的SVG矢量图.输出一个圆. svg图文件的后缀名为.svg;将上面的代码另存为svg文件,用浏览器打开即可. 几乎所有的浏览器都支持 SVG显示,如果不能显示

iTextSharp矢量图

PdfContentByte cb = writer.DirectContentUnder; //填充色的赋值 cb.SetColorFill(BaseColor.BLUE); //边框线的赋值 cb.SetColorStroke(BaseColor.BLACK); cb.SetLineWidth(2f); //cb.Circle(120f, 250f, 50f); cb.RoundRectangle(100, 100, 100, 100, 30); //画矢量图并画线和颜色填充 cb.Fill

excel 图表 保持矢量图格式 黏贴进word

笔者,最近投稿一篇学术论文时,要求数据图使用矢量图,excel图恰好画出图形为矢量图,且比较便利.但查找资料,网上无完全版本. 步骤如下: 1.excel 画图 2.word 选择性粘贴, 选择,Mcrosoft excel 工作表对象 3.编辑

ps中的位图,矢量图,颜色模式

什么是位图?什么是矢量图? 位图是由像素组成的图像,在缩放和旋转的时候容易失真,同时文件容量较大 矢量图是根据几何特性来绘制的图形,通过数学公式计算获得的,不易制作色彩变化太多的图象 颜色模式 RGB模式.CMYK模式.HSB模式.Lab颜色模式.位图模式.灰度模式 1:RGB模式 是Photoshop中最常用的模式,也被称之为真彩色模式,主要是由R(红).G(绿).B(蓝)3种基本色相加进行配色,并组成了红.绿.蓝3种颜色通道,每个颜色通道包含了8位颜色信息,每一个信息是用0~255的亮度值来