原文:JavaFx 使用字体图标记录 - Stars-One的杂货小窝之前其实也是研究过关于字体图标的使用,还整了个库Tornadofx学习笔记(4)——IconTextFx开源库,整合5000+个字体图标 - Stars-one - 博客园
由于之前并不是太过于讲解字体图标,最近又是抽空研究了一番
介绍字体图标在JavaFx中的Label控件和Text控件进行使用,使用字体图标的好处:
- 可以不用每次都需要图标的时候去拷贝图片到项目
- 可以通过样式直接更改字体颜色从而实现更改图标颜色
比如另外的Remix IconRemix Icon - Open source icon library,里面的基础图标很全,推荐大家可以集成一下,ttf文件大小不到400KB
我们以阿里巴巴矢量图标库来说明下使用方法
使用1.下载图标文件使用github账号登录一下阿里巴巴矢量图标库,之后选择我们需要的图标,添加到购物车
注意: 字体图标选用纯色的比较好
文章插图
之后点击购物车,可以查看自己选择的图标,选择添加到项目(如果没有项目,可以在之后弹窗中新建项目)
文章插图
之后可以查看我们的项目,从顶头的导航菜单进来(资源管理->我的项目),选择下载到本地
文章插图
之后你会得到一个压缩包,解压如下所示
文章插图
可以看到有个简单的html文件,这个文件我们可以打开,是用来预览图标,如下所示
文章插图
除此之外,我们还可以看到json文件,里面的内容实际上就是关于各图标的名称,unicode等数据,之后我们可以用到此份json文件
ttf文件则是我们需要的字体文件,需要复制到我们项目中进行使用
2.代码中使用我们将ttf文件复制到项目中,该如何使用呢?下面我按照两种语言进行简单说明
Java
//读取字体文件,第二个参数是字体大小Font font = Font.loadFont(getClass().getResourceAsStream("/ttf/icon.ttf"), 20.0);//某个图标的unicodechar unicode = '\ue001';Text text = new Text();//设置字体和文字text.setFont(font);text.setText(Character.toString(unicode));//这里根据情况输入填写,主要就是修改颜色和字体text.setStyle("-fx-font-size:20px;-fx-fill:red;");
上述代码中,unicode数据是怎么来的呢?各位通过html文件应该就能明白了,图标下面有所标明,我们需要把#$x
给替换成了\u
即可文章插图
注意上面,我们的unicode是char类型的,在设置的时候使用了此方法
Character.toString(unicode)
,将其转为了String类型,我们暂且将此结果称为unicode字体数据实际上,我们直接打印出来使不会有任何显示的,因为我们当前系统没有此unicode对应的字体
但是,实际上,我们一般都是直接获取到一个String对象而不是一个char类型,如
String s = "\\ue001"
,PS:双斜杠是因为需要转义,实际上变量s的内容为上面的变量s不是unicode字体数据,该如何转换呢?\ue001
这里,可以使用
commons-text
库中的StringEscapeUtils
工具类进行转换首先,是引用maven依赖
<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-text --><dependency><groupId>org.apache.commons</groupId><artifactId>commons-text</artifactId><version>1.9</version></dependency>
- StringEscapeUtils.unescapeJava() 将unicode形式的字符串转为unicode字体数据
- StringEscapeUtils.escapeJava() 将unicode字体数据转为unicode形式的字符串,中文其实也算做unicode字体数据, 如中文的"我"得到的返回结果为
\u6211
或者可以复制一些特殊表情也可以进行转换哦
//读取字体文件,第二个参数是字体大小Font font = Font.loadFont(getClass().getResourceAsStream("/ttf/iconfont.ttf"), 20.0);//某个图标的unicodeString unicode = "\\ue001";Text text = new Text();//设置字体和文字text.setFont(font);text.setText(StringEscapeUtils.unescapeJava(unicode));//这里根据情况输入填写,主要就是修改颜色和字体text.setStyle("-fx-font-size:20px;-fx-fill:red;");
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- uni-app 如何优雅的使用权限认证并对本地文件上下起手
- 手把手教你玩转 Gitea|使用 Helm 在 K3s 上安装 Gitea
- spring boot使用swagger生成api接口文档
- 壁挂炉怎么正确使用(壁挂炉怎么烧洗澡水)
- Flink的异步算子的原理及使用
- time使用 研一小白入坑Go
- 儿童社保卡可以怎么用(儿童新版社保卡如何使用)
- vue2使用组件进行父子互相传值的sync语法糖方法和原生方法
- 爱国者手机u盘怎么用(爱国者的u盘使用方法)
- 社保每个月都在交,社保卡该如何使用(老家有一张社保卡外省交了社保)