很多人下載字體庫都是在阿里字體庫找字體下載字體。但是我還是喜歡這個這個網站弄字體
1.假設我們找一個網站上面發(fā)現了不錯的字體
1.1 我們打開控制臺然后在網絡中過濾woff,就找到了字體文件?
?
1.2 在網上找到字體轉svg的網站?TTF轉SVG - 在線轉換圖像文件??(我用ttf轉svg不理想,用woff2文件轉)可以下載文件也可以直接復制鏈接使用鏈接的方式
?然后將轉化后的文件下載下來
2.生產字體
打開這個網站? IcoMoon App - Icon Font, SVG, PDF & PNG Generator? ?
點擊 左上角Import Icons 選擇剛剛生產的svg文件
?選擇你需要的字體? 當然 你可以導入多個字體庫 然后在多個字體庫中選擇需要的字體
?最后點擊最下面一行的Generate Font?
你可以在這里修改字體的名字,然后點擊坐下角的download 進行下載,也可以點擊旁邊的設置進行一些設置?
下載后是這個樣子的
我們的字體文件就在fonts中,demo.html中有使用的方法
3.使用字體
我們在uniapp項目中的static 文件夾存放字體文件 首先我們將fonts文件復制到static下 然后復制style.css到這個文件夾下 注意修改css文件中字體文件的相對路徑
?文章來源地址http://www.zghlxwxcb.cn/news/detail-491047.html
中App.vue問價中引入style.css
?
<i class="icon-home3" style="font-size: 50px;"></i>
?
?然后我們講另一種方法就是使用base64這種類型的字體
首先打開字體轉base64 的網站?File To Base64 Encoder | Convert any file | GiftOfSpeed
將我們的字體文件導入進去
?
我用的是ttf文件 所以將ttf的代碼復制? 覆蓋stly.css 的@font-face部分 其余部分不變
?然后將生成的base64 替換到@font-face ->?src? 中的YOUR BASE64 STRING HERE 這個內容
然后再修改?@font-face ->??font-family 將可以了
<i class="icon-phone" style="font-size: 50px;"></i>
?文章來源:http://www.zghlxwxcb.cn/news/detail-491047.html
?
到了這里,關于在uniapp的小程序中使用自己的字體庫的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!