1. 超梦电商首页
  2. 好文推荐

阿里字体库怎么用？分享阿里宝卡使用详细教程

香香 • • 好文推荐 • 阅读 644
Google Fonts免费字体网站提供相当大量的中英文字体下载，如果要运用于网站，也能立即用于内嵌代码，以Webfont形式在浏览器开启网页时快速加载字体档。一般来说，英文字体运用在网页中几乎没什么太大问题，但中文因为字体档案太大、授权等问题，就必须借助一些技术来加快加载速度，避免影响使用者读取网站，例如使用Typekit、Google Fonts加载思源黑体提升文字显示质感（不过后者仍在测试阶段）。 不过如果你的访客多半来自国内，碍于国内的网络环境情况较为特殊，使用Google Fonts可能因为无法正常加载字体而拖慢整体速度，就只能选择替代方案，你总不会希望因为字体无法顺畅加载而损失大量访客。 本文要介绍的「Iconfont」是一款来自国内阿里巴巴的向量图标库服务，可以在线储存、格式转换图标，本身也有免费的中文网页字体Webfont动态用于功能，在Iconfont.cn中文字体库中收录包括思源黑体、思源宋体、杨任东竹石体、站酷小薇体、阿里智能汉仪黑体、站酷高端黑体、厦门正道标题体等等。 使用Iconfont无须注册或付费，直接从网页端就能用于嵌入代码和连接，网址部分是由阿里巴巴提供的CDN，加载速度很快，把要用于为字体的文字制作成ttf、eot、woff和svg格式，网站也会直接给出代码和前端套用说明。 站点名称：Iconfont Webfont 网站连接： http://www.iconfont.cn/webfont 教程网址：www.52yunying.cn 使用教学

STEP 1

开启Iconfont Webfont工具，会看到预先加载的网页字体包括思源黑体极细、粗、超粗和一般常规的字重样式。
阿里字体库怎么用？分享阿里宝卡使用详细教程

STEP 2

从左侧点选新增加入更多字体，在Iconfont.cn提供其他中文字体，点选后会加入，即时套用你当前的字体，那么如何以Iconfont用于需要的特殊字体呢？直接在上方输入要用的文字后点选「生成字体」用于对应的嵌入代码和相关档案。
阿里字体库怎么用？分享阿里宝卡使用详细教程

STEP 3

最后，点选「引用在线地址」用于@font-face和相关档案嵌入语法，只要把代码加入你的样式表就能加载该字体，如果对于套用方式不够熟悉，点选「前端应用帮助」连接取得更多更深入的使用说明。
阿里字体库怎么用？分享阿里宝卡使用详细教程

在说明帮助里就有使用font-face声明字体、定义使用Webfont样式、为文字加入对应样式等等示例代码，因为是中文说明应该不会太难懂，有需要的朋友可自行研究一下。
阿里字体库怎么用？分享阿里宝卡使用详细教程

不过就我的实际操作试用，Iconfont和Google Fonts、Typekit这类Webfont还是有点不太一样的，Iconfont只能针对你预先设定好的文字加入网页字体效果，无法动态抓取完整内容自动加载特定字体，但类似功能依然有其可用性，如果要做网页设计需要在一些标题或部分文字加入特殊字体，且你的访客多半来自国内，Iconfont或许可以一试。
阿里字体库怎么用？分享阿里宝卡使用详细教程

52运营推荐值得一试的三个理由： 1、提供向量图标库、中文网页字体动态用于功能 2、多种中文字体可供选择 3、一键用于相关档案，内嵌代码使用阿里云CDN

声明：本文由网站用户香香发表，超梦电商平台仅提供信息存储服务，版权归原作者所有。若发现本站文章存在版权问题，如发现文章、图片等侵权行为，请联系我们删除。

赞 (0)
香香香香网站编辑组
0 0
上一篇 2023年3月25日 08:47:41
下一篇 2023年3月25日 08:57:45

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注