国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

在uniapp的小程序中使用自己的字體庫

這篇具有很好參考價值的文章主要介紹了在uniapp的小程序中使用自己的字體庫。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

很多人下載字體庫都是在阿里字體庫找字體下載字體。但是我還是喜歡這個這個網站弄字體

1.假設我們找一個網站上面發(fā)現了不錯的字體

1.1 我們打開控制臺然后在網絡中過濾woff,就找到了字體文件?

?在uniapp的小程序中使用自己的字體庫

1.2 在網上找到字體轉svg的網站?TTF轉SVG - 在線轉換圖像文件??(我用ttf轉svg不理想,用woff2文件轉)可以下載文件也可以直接復制鏈接使用鏈接的方式

在uniapp的小程序中使用自己的字體庫

在uniapp的小程序中使用自己的字體庫

?然后將轉化后的文件下載下來

2.生產字體

打開這個網站? IcoMoon App - Icon Font, SVG, PDF & PNG Generator? ?

在uniapp的小程序中使用自己的字體庫

點擊 左上角Import Icons 選擇剛剛生產的svg文件

在uniapp的小程序中使用自己的字體庫

?選擇你需要的字體? 當然 你可以導入多個字體庫 然后在多個字體庫中選擇需要的字體

在uniapp的小程序中使用自己的字體庫

?最后點擊最下面一行的Generate Font?

在uniapp的小程序中使用自己的字體庫

你可以在這里修改字體的名字,然后點擊坐下角的download 進行下載,也可以點擊旁邊的設置進行一些設置?

下載后是這個樣子的

在uniapp的小程序中使用自己的字體庫

我們的字體文件就在fonts中,demo.html中有使用的方法

3.使用字體

我們在uniapp項目中的static 文件夾存放字體文件 首先我們將fonts文件復制到static下 然后復制style.css到這個文件夾下 注意修改css文件中字體文件的相對路徑

在uniapp的小程序中使用自己的字體庫

?文章來源地址http://www.zghlxwxcb.cn/news/detail-491047.html

中App.vue問價中引入style.css

在uniapp的小程序中使用自己的字體庫

?

<i class="icon-home3" style="font-size: 50px;"></i>

?在uniapp的小程序中使用自己的字體庫

?然后我們講另一種方法就是使用base64這種類型的字體

首先打開字體轉base64 的網站?File To Base64 Encoder | Convert any file | GiftOfSpeed

將我們的字體文件導入進去

在uniapp的小程序中使用自己的字體庫

?在uniapp的小程序中使用自己的字體庫

我用的是ttf文件 所以將ttf的代碼復制? 覆蓋stly.css 的@font-face部分 其余部分不變

在uniapp的小程序中使用自己的字體庫

?然后將生成的base64 替換到@font-face ->?src? 中的YOUR BASE64 STRING HERE 這個內容

然后再修改?@font-face ->??font-family 將可以了

<i class="icon-phone" style="font-size: 50px;"></i>

?在uniapp的小程序中使用自己的字體庫

?

到了這里,關于在uniapp的小程序中使用自己的字體庫的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如若轉載,請注明出處: 如若內容造成侵權/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經查實,立即刪除!

領支付寶紅包贊助服務器費用

相關文章

  • 小程序怎么開發(fā)?怎么開發(fā)自己的小程序

    一、明確需求與定位 在開發(fā)小程序之前,需要明確需求. 首先,明確小程序的定位非常重要。我們需要確定小程序是為了提供便捷的購物體驗還是特定領域的服務。明確定位可以幫助我們更好地設計和優(yōu)化小程序的功能,以符合用戶的期望和需求。 其次,了解目標用戶群體也

    2024年02月22日
    瀏覽(27)
  • 微信如何創(chuàng)建自己的小程序?

    微信如何創(chuàng)建自己的小程序?

    微信如何創(chuàng)建自己的小程序?微信小程序成為了很多商家、企業(yè)甚至是個人在互聯網中的營銷工具,微信小程序基本上可以說是屬于必備工具。那么微信如何創(chuàng)建自己的小程序呢?下面一起來給大家說說。 一、注冊小程序賬號 微信如何創(chuàng)建自己的小程序。首先要有一個小程

    2024年02月12日
    瀏覽(18)
  • uniapp的小程序中使用web-view進行相互傳參,并監(jiān)聽web-view的返回鍵

    uniapp的小程序中使用web-view進行相互傳參,并監(jiān)聽web-view的返回鍵

    H5頁面中 1.引入微信js https://res.wx.qq.com/open/js/jweixin-1.4.0.js 2.引入 uniapp 的jdk文件(去官網下到本地)( 引入一定要放到body下面,不然UniAppJSBridgeReady不生效 ) 3.寫好UniAppJSBridgeReady vue頁面中接收值 在vue的h5頁面中 在uniapp頁面中通過@message拿值 原因:官方說小程序使用web-view是

    2024年02月08日
    瀏覽(21)
  • 如何創(chuàng)建自己的小程序?零編程一鍵創(chuàng)建實戰(zhàn)指南

    如何創(chuàng)建自己的小程序?零編程一鍵創(chuàng)建實戰(zhàn)指南

    當今瞬息萬變的數字世界中,擁有一個屬于自己的小程序已成為企業(yè)與個人展示、服務和互動的重要途徑。無需編碼知識,通過便捷的云端可視化平臺,也可以輕松創(chuàng)建一款符合自身需求且功能豐富的小程序。下面給大家分享如何創(chuàng)建自己的小程序。 1 、選擇一個易用的小程

    2024年01月25日
    瀏覽(50)
  • 教你如何寫一個符合自己需求的小程序日歷組件

    教你如何寫一個符合自己需求的小程序日歷組件

    很多時候,我們生活中會有各種打卡的情況,比如 keep 的運動打卡、單詞的學習打卡和各種簽到打卡或者酒店的入住時間選擇,這時候就需要我們書寫一個日歷組件來處理我們這種需求。 但是更多時候,我們都是網上找一個插件直接套用了,有沒有想過自己實現一下呢?如果

    2024年02月10日
    瀏覽(21)
  • 使用HbuilderX3.8.3_把開發(fā)的小程序發(fā)布為Html5頁面上傳到_免費托管空間---uniapp_小程序開發(fā)工作筆記009

    使用HbuilderX3.8.3_把開發(fā)的小程序發(fā)布為Html5頁面上傳到_免費托管空間---uniapp_小程序開發(fā)工作筆記009

    ? ?找了很久,畢竟自己也是做測試,本來想買個服務器來著,由于了一下,還是給我找到了最終~ 自己做的小程序想部署,又不想買阿里云服務器,部署到阿貝云也不錯,阿貝云會給開發(fā)者提供,? 免費虛擬主機 和 免費的云服務器,最近我用了一段時間感覺還很不錯也很穩(wěn)定我測試用完

    2024年02月03日
    瀏覽(18)
  • 基于uniapp的仿書旗小說的小程序

    基于uniapp的仿書旗小說的小程序

    書旗小說是阿里文學旗下手機閱讀APP,擁有阿里文學平臺上的小說資源 [1] 。書旗小說除了擁有傳統閱讀器的書籍同步閱讀、全自動書簽、自動保存閱讀歷史、點擊翻頁、全屏文字搜索定位、自動預讀、同步更新等功能外,更有離線書包、增強書簽以及資訊論壇等擴展內容,

    2024年02月12日
    瀏覽(34)
  • 這樣使用chatgpt方可完成自己的小項目了

    使用GDScript 編寫一個臺球小游戲的項目功能有哪些 臺球小游戲的項目功能如下: 開始界面:包括游戲開始按鈕、游戲說明按鈕、游戲設置按鈕等,通過按鈕實現用戶與游戲的交互。 游戲場景:包括游戲背景、桌面、球、球桿等元素,通過精靈或節(jié)點等組件實現。 游戲規(guī)則:

    2024年02月05日
    瀏覽(20)
  • 小程序開發(fā)費用一覽表,如果你也想要用低成本制作出自己的小程序,來了解一下!

    小程序開發(fā)費用一覽表,如果你也想要用低成本制作出自己的小程序,來了解一下!

    近幾年來微信小程序的發(fā)展的十分的迅速,越來越多的用戶對小程序已經非常熟悉,同時很多商家都看到了小程序的商機,其中小程序商城更是受到眾多用戶和商家的歡迎。 制作小程序商城主要的方式有兩種,一種是源碼定制開發(fā),一種是直接套用小程序模板了。而其中大家

    2023年04月08日
    瀏覽(23)
  • 使用uniapp實現小程序圖片和視頻的下載功能

    使用uniapp實現小程序圖片和視頻的下載功能

    提示:本人親測可直接使用 url: http 圖片/視頻 is_video:false圖片下載 true視頻下載 提示:這是使用的小程序,可以去體驗

    2024年02月11日
    瀏覽(32)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包,優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包