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

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

作者头像
wanchao创始人

上一篇:淘宝电商直播销量(淘宝电商直播带货再创奇迹,轻松实现销售目标!)
下一篇:电商公司寄快递电商公司快递寄送服务)