1. 首頁 > 生活百科 > >

JavaFx 使用字體圖標記錄

生活百科

原文:JavaFx 使用字體圖標記錄 - Stars-One的雜貨小窩
之前其實也是研究過關于字體圖標的使用,還整了個庫Tornadofx學習筆記（4）——IconTextFx開源庫,整合5000+個字體圖標 - Stars-one - 博客園
由于之前并不是太過于講解字體圖標,最近又是抽空研究了一番
介紹字體圖標在JavaFx中的Label控件和Text控件進行使用,使用字體圖標的好處:
  • 可以不用每次都需要圖標的時候去拷貝圖片到項目
  • 可以通過樣式直接更改字體顏色從而實現更改圖標顏色
提供字體圖標的網站有很多,比如阿里的iconfont-阿里巴巴矢量圖標庫
比如另外的Remix IconRemix Icon - Open source icon library,里面的基礎圖標很全,推薦大家可以集成一下,ttf文件大小不到400KB
我們以阿里巴巴矢量圖標庫來說明下使用方法
使用1.下載圖標文件使用github賬號登錄一下阿里巴巴矢量圖標庫,之后選擇我們需要的圖標,添加到購物車
注意: 字體圖標選用純色的比較好

JavaFx 使用字體圖標記錄

文章插圖
之后點擊購物車,可以查看自己選擇的圖標,選擇添加到項目(如果沒有項目,可以在之后彈窗中新建項目)
JavaFx 使用字體圖標記錄

文章插圖
之后可以查看我們的項目,從頂頭的導航菜單進來(資源管理->我的項目),選擇下載到本地
JavaFx 使用字體圖標記錄

文章插圖
之后你會得到一個壓縮包,解壓如下所示
JavaFx 使用字體圖標記錄

文章插圖
可以看到有個簡單的html文件,這個文件我們可以打開,是用來預覽圖標,如下所示
JavaFx 使用字體圖標記錄

文章插圖
除此之外,我們還可以看到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即可
JavaFx 使用字體圖標記錄

文章插圖
注意上面,我們的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);//某個圖標的unicodeString unicode = "\\ue001";Text text = new Text();//設置字體和文字text.setFont(font);text.setText(StringEscapeUtils.unescapeJava(unicode));//這里根據情況輸入填寫,主要就是修改顏色和字體text.setStyle("-fx-font-size:20px;-fx-fill:red;");

推薦閱讀