App Inventor學習記錄155-可以自訂文字的字型的外掛~YourFont

app inventor中,可以用的字型就是那幾個,如果我們想要使用比較好看的字型的時候,就可以使用 YourFont這個外掛。這樣就可以自訂文字的字型


這次範例的完成品如下。

上方有 2個按鈕。button 2是套用外掛自訂字型的效果。button 3則是回復內建的字型。
這次測試了標籤、按鈕、文字輸入盒、複選盒,清單選擇器以及開關的元件。都可以套用。
不止是可以套用英文字型,也可以套用中文的字型

套用中文字型有一些限制在,等等再來說明。


畫面編排的部份如下。

常用元件的部份就不說了。
your font 4~7,分別代表了一種字型,最上方猴嗯架按呢的標籤,套用的是中文的清松手寫體。
其它 3個則是英文字型。


when button 2.click,當按鈕 2按下的時候。
call your font 4.set font,呼叫 your font外掛中,設定字型的這個方塊。
component,這裡就放要套用到一個元件上就可以了。

這次套用的元件有上面這些。


when button 3.click,當按鈕 3按下的時候。
call your font 4.reset font,呼叫 your font外掛中,取消字型設定的這個方塊。
component,同樣就放要套用到一個元件上就可以了。


這次的外掛在使用上我有遇到一些小小的問題。
首先,它可以在夜神模擬器上執行,但在手機上用 ai companion連線測試時候,會發生錯誤
但是轉成 apk後,在手機上就可以順利的執行
轉成 aab的部份,還沒有測試到,等下次遇到再提出說明。

另外,要套用的字型,要上傳到素材裡
上傳的時候要特別注意,app inventor有單檔上傳上限 5MB的限制
以清松手寫體為例,它的字型檔,就已經超出這個限制,所以我是用 fontsubsetpack這個程式,去取出我們要使用的字之後,再上傳修改後的字型檔。
這個部份,晚一點再來寫使用記錄。

這個外掛支援的字型檔的檔案格式,我只試過 ttf的類型,其它類型沒有試過。


這次的 aia檔的下載連結如下:
NO_155_YourFont.aia

APP INVENTOR外掛
名稱:YourFont
外掛來源:community.appinventor.mit.edu
外掛載點:
https://community.appinventor.mit.edu/t/yourfont-extension-opensource/9131

參考書籍請見博客來書籍介紹頁面:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響