阿里巴巴官网:https://www.iconfont.cn/
如有需要,请注意到文章最后的问题。
一,图标
1,搜索关键词,点击图标 -> 加入购物车 -> 添加到项目
2,两种方式
(1)选择 Font class 或者 Unicode ?
”点击复制代码 “ 加上 https: 到浏览器打开文件;
把文件内容复制到小程序项目中的 iconfont.css 文件中;
修改 @font-face 里面文件的链接改为网络资源,//at 前全部替换成 https: //at…
(2)如果网络资源不可用,就需要下载到本地
把 @font-face 里面的相关的几个文件上传到自己服务器;
把下载的 iconfont.css 文件复制到小程序项目中;
把 iconfont.css 文件 @font-face 里面文件的链接改为线上路径;
url('https://healthytool.hsfzxyh.com/xyh_images/SCNU-AMS/icon/iconfont.ttf?t=1679294379876') format('truetype');
查看在线链接
示例
@font-face {
font-family: 'iconfont'; /* project id 3146718 */
src: url('');
src: url('?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_3146718_izwzcvw57hr.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_3146718_izwzcvw57hr.woff') format('woff'),
url('https://at.alicdn.com/t/font_3146718_izwzcvw57hr.ttf') format('truetype'),
url('#iconfont') format('svg');
}
3,可以全局应用(在app.vue中style中添加引用),也可以局部引用(指定.vue中的style中添加引用)
app.vue 中引入
<style>
@import "./static/css/iconfont.css";
</style>
4,使用(图标可以通过text view button等组件引用)
<text class="iconfont icon-shijian"></text>
二,小程序 字体样式 font-family ( 需要注意安卓,iphone 的字体显示问题 )
1,阿里巴巴字体
(1)选择字体,预览,右上角下载字体包;
(2)把字体文件放到自己的服务器上;
(3)复制以下代码到自己的样式文件中。
/* CDN 服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
font-family: "东方大楷";
font-weight: 100;
src: url(".../G82ew0AXFCAj/jqzMZYbhmrRr.woff2") format("woff2"),
url(".../G82ew0AXFCAj/AUpC0Y4TQuZ1.woff") format("woff");
font-display: swap;
}
调用
font-family: '东方大楷';
2,其他字体包
(2.1)
- 下载字体包路径:https://zhuanlan.zhihu.com/p/432927503 (有些是需要费用的,有些是免费的)
- .ttf 格式需要加 format(‘truetype’)
- 多个字体文件需要用 逗号隔开
@font-face {
font-family: "东方大楷";
font-weight: 100;
// src: url(".../font/也字工厂电影旁白体.ttf") format('truetype');
src: url(".../font/Alimama_DongFangDaKai_Regular.woff2") format("woff2"),
url(".../font/Alimama_DongFangDaKai_Regular.woff") format("woff");
font-display: swap;
}
.text_class{
font-family: "字体样式名"
}
(2.2) uniapp API
uni.loadFontFace({
family: 'kaiti0102',
source: 'url(".../font/Alimama_DongFangDaKai_Regular.woff")'
})
font-family: "kaiti0102"
问题一 如果安卓手机显示不了图标,苹果手机可以显示,可以把图标转成base64
具体操作:
1.打开‘我的项目’
2.修改unicode为base64
(1)打开项目设置
(2)在字体格式选项勾选‘TTF’和‘base64’就可以了
(3)点击更新代码,就可以在光放页面把原先的TTF改为base64了(如下图)
3.复制最新的在线代码 替换原本的就行
问题二 如果安卓手机显示不了字体,苹果手机可以显示,可以把图标转成base64,或者尝试下面的方法
- 使用loadFontFace官方的方法,发现在安卓也不好使。
- 但是官网方法中有失败函数回调,发现字体没有加载成功,在看官网有句解释:字体链接必须是同源下的,或开启了cors支持,小程序的域名是servicewechat.com
- 推测应该是同源策略的问题,让后台去服务器开启跨域解决。
- 配置完下列代码后,使用font-face引入和loadFontFace引入字体安卓都是生效的。
放在小程序请求的端口里面 443
//nginx 配置,亲测可用
location ~* \.(eot|ttf|woff|woff2|svg)$ {
add_header Access-Control-Allow-Origin *;
}
今天的文章阿里巴巴标准字体_字母logo设计分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/79489.html