原文:JavaFx 使用字体图标记录 - Stars-One的杂货小窝

之前其实也是研究过关于字体图标的使用,还整了个库Tornadofx学习笔记(4)——IconTextFx开源库,整合5000+个字体图标 - Stars-one - 博客园

由于之前并不是太过于讲解字体图标,最近又是抽空研究了一番

介绍

字体图标在JavaFx中的Label控件和Text控件进行使用,使用字体图标的好处:

  • 可以不用每次都需要图标的时候去拷贝图片到项目
  • 可以通过样式直接更改字体颜色从而实现更改图标颜色

提供字体图标的网站有很多,比如阿里的iconfont-阿里巴巴矢量图标库

比如另外的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);
//某个图标的unicode
char 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的内容为\ue001

上面的变量s不是unicode字体数据,该如何转换呢?

这里,可以使用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);
//某个图标的unicode
String unicode = "\\ue001";
Text text = new Text();
//设置字体和文字
text.setFont(font);
text.setText(StringEscapeUtils.unescapeJava(unicode));
//这里根据情况输入填写,主要就是修改颜色和字体
text.setStyle("-fx-font-size:20px;-fx-fill:red;");

Kotlin

在Kotlin中,和Java不同,我们可以直接把char类型当成字符串String类型,如下代码所示:

text {
//第二个参数是字体大小
font = loadFont("/font/iconfont.ttf", 25.0)!!
//如果只有一个\,在Kotlin中就是字体数据
text ="\ueDEF"
style {
fill = c("red")
}
}

但是如果我们是动态读入的一个unicode数据,则是没法使用的,原因和上述说的一样,因为不是unicode字体数据,所以text控件会什么都不显示

text {
font = loadFont("/font/iconfont.ttf", 25.0)!!
//两个斜杠,需要调用方法转为unicode字体数据
text = StringEscapeUtils.unescapeJava("\\ueDEF")
style {
fill = c("red")
}
}

补充

最后,上述也是提到了,我们解压出来的字体目录下有一份json文件,实际上,我们可以将此份json数据也放在项目文件夹里

在应用运行开始的时候读取,构建一个Map<String,String>,key为名称,而value则是unicode字体数据

之后我们需要用到的时候,可以直接根据名称从中拿去unicode字体数据直接显示

参考

JavaFx 使用字体图标记录的更多相关文章

  1. MVC.NET 发布后,部署到iis ,网站中的Bootstrap的字体图标不能正常显示

    时隔多日没有在博客中记录自己遇到的问题及解决方案了 ,今天给大家分享一个可能会遇到的一个鸡肋bug ! 如果你的项目是MVC并且在项目中引用了 Boostrap 框架,你在编辑发布后部署到iis的时候 ...

  2. 将svg文件化成字体图标的步骤

     一 前提摘要     有一个活就是按照需求在现有的项目中新增几个项目和修改几个项目,是很简单的,但当中遇到了一个小问题,就是tabs中图标选中和被选中的颜色问题,如果是新开发的,目前掌握的有两种办法 ...

  3. css字体图标的使用方法

    提要:对于传统的一般用css雪碧(css sprite)来搞,目前大部分网站已经主要字体图标 ,利用font+css 或者font+html 来开发,今天总结了一下,记录之~ css sprite用背 ...

  4. 如何在微信小程序中使用字体图标

    微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...

  5. css雪碧图(精灵图)与字体图标的介绍以及对比

    css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...

  6. vue项目打包部署elementUI的字体图标丢失问题

    自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下 ...

  7. Tornadofx学习笔记(4)——IconTextFx开源库,整合5000+个字体图标

    JavaFx中其实也可以直接使用字体图标iconfont的,只需要加载ttf字体文件,之后设置unicode即可,具体可以看我给出的代码 既然JavaFx可以,那么以JavaFx为基础的Tornado ...

  8. 初学者--bootstrap(六)组件中的字体图标----在路上(9)

    组件---字体图标 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 1.如何使用:        出于性能的考虑,所有图标都需要一个基类和对应每个图标的类.把下面的代码放在 ...

  9. 如何使用IconFont字体图标代替网页图片?

    一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...

随机推荐

  1. JavaWeb--Cookie与Session

    前言 Java Web 其实就是一个技术的总和,把Web看成一个容器而已主要使用JavaEE技术来实现.在加上各种中间件. 整个javaWeb阶段的内容通过实际的案例贯穿学习, 所涉及到的技术知识点会 ...

  2. 一文带你了解webrtc基本原理(动手实现1v1视频通话)

    webrtc (Web Real-Time Communications) 是一个实时通讯技术,也是实时音视频技术的标准和框架. 大白话讲,webrtc是一个集大成的实时音视频技术集,包含了各种客户端 ...

  3. 原生js也可以自定义组件

    Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们. 它由三项主要技术组成,它们可以一起使用来创建封装功能的定制元 ...

  4. 一个注解搞定SpringBoot接口定制属性加解密

    前言 上个月公司另一个团队做的新项目上线后大体上运行稳定,但包括研发负责人在内的两个人在项目上线后立马就跳槽了,然后又交接给了我这个「垃圾回收人员」. 本周甲方另一个厂家的监控平台扫描到我们这个项目某 ...

  5. ArrayList,LinkedList

    ArrayList,LinkedList ArrayList 采用的是数组形式来保存对象的,这种方式将对象放在连续的位置中,所以最大的缺点就是插入删除时非常麻烦LinkedList 采用的将链表的数据 ...

  6. jQuery使用case记录

    添加元素/内容追加等 元素内: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 元素外: after() - 在被选元素之后插入内容 before() ...

  7. 👍CleanShot X 3.1.1 破解版 (超强屏幕截图录像工具) (TNT + 免激活)

    软件语言为ENGLISH,英文不好的劝退! 软件介绍/功能 CleanShot X 3 是一款Mac超强截图以及屏幕录制工具.支持:区域截图.窗口截图.滚动截图.延时截图.屏幕录制.贴图.截图时隐藏桌 ...

  8. 基于开源方案构建统一的文件在线预览与office协同编辑平台的架构与实现历程

    大家好,又见面了. 在构建业务系统的时候,经常会涉及到对附件的支持,继而又会引申出对附件在线预览.在线编辑.多人协同编辑等种种能力的诉求. 对于人力不是特别充裕.或者项目投入预期规划不是特别大的公司或 ...

  9. .Net+Vue3实现数据简易导入功能

    在开发的过程中,上传文件或者导入数据是一件很常见的事情,导入数据可以有两种方式: 前端上传文件到后台,后台读取文件内容,进行验证再进行存储 前端读取数据,进行数据验证,然后发送数据到后台进行存储 这两 ...

  10. openstack中Cinder组件简解

    一,Cinder组件介绍 概念 cinder组件作用: 块存储服务,为运行实例提供稳定的数据块存储服务 块存储服务,提供对 volume 从创建到删除整个生命周期的管理 二,常用操作 1.Volume ...