uniapp开发问题记录字体引入（一）

该篇博文主要是对uniapp开发遇到问题的记录，之后会逐步更新。

一、uniapp导入阿里巴巴字体库

首先在阿里巴巴矢量图标库中收集自己要的字体，专门建立一个项目，然后点击下载到本地，解压，把其中的iconfont.css拷贝到自己的项目下（可以新建一个common/css目录），然后在自己的 APP.vue中引入，然后在点击“查看在线连接”——选择Unicode，点此复制代码，把这代码复制到刚才的iconfont.css文件中，添加上https，如下图：

使用：如下1在class中加入iconfont 和阿里巴巴中的font class名即可

问题：

1.如上图中引入iconfont.css文件时必要要主要后面的分号，漏了的话会引入不进来，下面代码的颜色也变了，这是写法的问题

2.如果更新了图标，在项目中重新加入了图标，直接点击“在线连接”，他会提示有图标更新，需要更新代码，点击即可更新完后复制代码替换iconfont.css中的font-face代码。这样的话，如果我直接按class的方式（上图中的方式1）引入新加入的图标，会无效，只有按上图中的方式2，class方式和unicode方式一起用才有用，或者直接重新把字体包下载至本地，把iconfont.css文件整体替换了，再按上面步骤，替换了@font-face，再按正常方式引入图标就有用了。

二、手机端H5或者APP padding-right无效

如下图：在一个盒子中设置了width：100%，然后padding-right就无效了。解决办法就是给这盒子设置：box-sizing：border-box,或者去掉width：100%的设置即可。

uniapp开发问题记录字体引入（一）相关推荐

uniapp开发小程序，引入腾讯兔小巢插件，兔小巢页面导航头部样式错乱问题
uniapp开发小程序,引入腾讯兔小巢插件,导航头部样式错乱问题 uniapp开发小程序,引入腾讯兔小巢插件,导航头部样式错乱问题 uniapp开发微信小程序,所有页面头部导航都是自定义的,引入腾讯兔 ...
php做app百度经验,fastadmin+uni-app开发记录
许久不写代码,发现很多基础都已经忘得差不多了,感觉复习一下.写不出文档,就先把技术给练一下吧.由于我没有系统地学习过php,所以很多都是网上找的零碎的知识,可能会有错,还望指正! fastadmin采 ...
记录一下uni-app开发中遇到的坑
一.uni-app中不能操作dom uni-app开发中不能操作dom,就是一切的按照vue那种方式进行数据绑定,要不然在网页端看着是好好的,但是一旦打包放到真机上就是各种问题.所以只要熟悉vue并且 ...
uniapp开发聊天APP踩坑记录
最近工作重心转移到了uniapp上,有一说一,这个框架跨端确实牛逼,一套代码能一次编译到多端使用.但随之而来的兼容性问题也是层出不穷,同样的在面临APP底层的改动也显得力不从心.同时,uniapp的性 ...
uniapp 开发踩坑记录
使用dcloud 的 uniapp开发了一个app,把遇到的问题总结一下: 1.uniapp 前端的布局代码与小程序高度相似(如果没有接触过建议多看看文档):js是用的vue 布局比较简单,比jq ...
uni-app开发微信小程序使用微信小程序的插件
假如使用uni-app开发微信小程序需要用到官方插件----OCR插件, 插件地址如下: OCR插件申请方式见插件地址介绍.本文主要记录调用方式 1.在manifest.json的"mp- ...
uni-app开发中遇到的问题（持续更新...）
uni-app开发中遇到的问题详情页面返回上一页,并刷新列表 components中的组件无需引入分离页面的js.css文件设置页面颜色出现分层 uni-app端无法显示图片 uniapp如何取 ...
图像和base64的转换 uniapp开发
图像和base64的转换记录一.插件地址二.使用步骤 1.引入库 2.pathToBase64 3.base64ToPath 记录使用uniapp开发微信小程序的过程中遇到,需要将图片转换为b ...
使用uniapp开发社区交友网站的项目教程
uniapp社区交友开发前端模块开发源码可以提供下载,详情访问末尾码云地址环境搭建和创建项目开发环境搭建使用HubilderX 安装对应插件创建uniapp项目创建项目(名称:社区交友) ...

uniapp开发问题记录字体引入（一）

uniapp开发问题记录字体引入（一）相关推荐

最新文章

热门文章