uniapp 引用外部字体 踩坑

一、下载外部字体

二、文字提取  (ps:可省略,只为提取想要的文字)

通过 https://www.lcddjm.com/font(如果链接已失效,请搜索其他相关功能的页面提取),上传字体文件后,输入要提取的文字并填写自定义字体名称,提取成功后下载到本地。

三、字体引用


可在app.vue 中,也可在单独 vue文件中引用

@font-face {

    font-family: 'my-font';

    src: url('~@/static/font/my-font.ttf') format('truetype');

}

四、文字使用

font-family:my-font;

踩坑:按照文档和其他博客这样引入文字, 给text 元素添加 字体未生效,后改为view 显示效果

补充 :转化为base64 :https://www.giftofspeed.com/base64-encoder/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容