#Iconfont.cn#阿里巴巴免费向量图标库,可产生中文网页字体嵌入网站

文章目录[隐藏]

#Iconfont.cn#阿里巴巴免费向量图标库,可产生中文网页字体嵌入网站

谷歌字体免费字体网站提供相当大量的中英文字体下载,如果要运用于网站,也能立即产生内嵌代码,以 webfont 形式在浏览器开启网页时快速加载字体档。一般来说,英文字体运用在网页中几乎没什么太大问题,但中文因为字体档案太大、授权等问题,就必须借助一些技术来加快加载速度,避免影响使用者读取网站,例如使用 Typekit、谷歌字体載入思源黑體提升文字显示质感(不过后者仍在测试阶段)。

值得一试的三个理由:

  1. 提供向量图标库、中文网页字体动态产生功能
  2. 多种中文字体可供选择
  3. 一键产生相关档案,内嵌代码使用阿里云 CDN

不過如果你的訪客多半來自中國,礙於中國的網路環境情況較為特殊,使用 Google Fonts 可能因為無法正常載入字型而拖慢整體速度(雖然目前好像已經解除封鎖),就只能選擇替代方案,你總不會希望因為字型無法順暢載入而損失大量訪客。

本文要介绍的「iconfont」是一款来自中国阿里巴巴的向量图标库服务,可以在线储存、格式转换图标,本身也有免费的中文网页字体 Webfont 动态产生功能,在 Iconfont.cn 中文字型庫中收錄包括思源黑體、思源宋體、楊任東竹石體、站酷小薇體、阿里智能漢儀黑體、站酷高端黑體、廈門正道標題體等等。

使用 Iconfont 無須註冊或付費,直接從網頁端就能產生嵌入程式碼和鏈結,網址部分是由阿里巴巴提供的 CDN,加载速度很快,把要产生为字体的文字制作成TTFEOTSVG格式,网站也会直接给出代码和前端套用说明。

站点名称:iconfont webfont
网站连接:http://www.iconfont.cn/webfont

使用教学

步骤 1

開啟 Iconfont Webfont 工具,會看到預先載入的網頁字型包括思源黑體極細、粗、超粗和一般常規的字重樣式。

#Iconfont.cn#阿里巴巴免费向量图标库,可产生中文网页字体嵌入网站

步骤 2

從左側點選新增加入更多字型,在 Iconfont.cn 提供其他中文字型,點選後會加入,即時套用你當前的字型,那麼如何以 Iconfont 產生需要的特殊字型呢?直接在上方輸入要用的文字後點選「生成字體」产生对应的嵌入代码和相关档案。

#Iconfont.cn#阿里巴巴免费向量图标库,可产生中文网页字体嵌入网站

步骤 3

最後,點選「引用在线地址」产生@的字体和相关档案嵌入语法,只要把代码加入你的样式表就能加载该字体,如果对于套用方式不够熟悉,点选「前端应用帮助」连接取得更多更深入的使用说明。

#Iconfont.cn#阿里巴巴免费向量图标库,可产生中文网页字体嵌入网站

在说明帮助里就有使用 font-face 声明字体、定义使用 Webfont 样式、为文字加入对应样式等等示例代码,因为是中文说明应该不会太难懂,有需要的朋友可自行研究一下。

#Iconfont.cn#阿里巴巴免费向量图标库,可产生中文网页字体嵌入网站

不過就我的實際操作試用,Iconfont 和 Google Fonts、Typekit 這類 Webfont 還是有點不太一樣的,Iconfont 只能针对你预先设定好的文字加入网页字体效果,无法动态抓取完整内容自动加载特定字体,但类似功能依然有其可用性,如果要做网页设计需要在一些标题或部分文字加入特殊字体,且你的访客多半来自中国,Iconfont 或许可以一试。

 


如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:#Iconfont.cn#阿里巴巴免费向量图标库,可产生中文网页字体嵌入网站
本文短地址:
喜欢 (1)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址