网站导航
> 文章列表 > 阿里巴巴图标，font-family字体样式

阿里巴巴图标，font-family字体样式

网友: 文章列表 2024-03-22 00:57:07

阿里巴巴图标，font-family字体样式

阿里巴巴官网：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.复制最新的在线代码 替换原本的就行

image

问题二 如果安卓手机显示不了字体，苹果手机可以显示，可以把图标转成base64，或者尝试下面的方法

  • 使用loadFontFace官方的方法，发现在安卓也不好使。
  • 但是官网方法中有失败函数回调，发现字体没有加载成功，在看官网有句解释：字体链接必须是同源下的，或开启了cors支持，小程序的域名是servicewechat.com
  • 推测应该是同源策略的问题，让后台去服务器开启跨域解决。
  • 配置完下列代码后，使用font-face引入和loadFontFace引入字体安卓都是生效的。

放在小程序请求的端口里面 443

//nginx 配置，亲测可用
location ~* \\.(eot|ttf|woff|woff2|svg)$ {add_header Access-Control-Allow-Origin *;
}
网络标签：

相关问题