盘点过去,你所看到的字体大多说都是较简单的。

Webfont技术可以让网页使用在线字体,而无需使用图片,在国外非常流行,由于中文的特殊情况,有几个难题一直没搞定,现在在国内几位技术大牛的努力下,终于有了一款神器。

“如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?”

“我会给设计师讲解工程上面临的问题,争取他理解。例如:如果文本使用图片,以腾讯站点的访问量来说,这里会需要消耗大量的服务器资源,至少需要增加 XXX 台服务器,带宽流量消耗 XXX 万”。

这是一段真实的面试场景,而我就是那位被面试者。这些年 Web 前端技术在迅猛的发展,这样的问题已经有了解决方案——WebFont,如果再回到当年面试的场景,我会给出更好的答案。

WebFont 技术可以让网页使用在线字体,而无需使用图片,从而有机会解决开头设计师提到的问题。它通过 CSS 的@font-face语句引入在线字体,使用 CSS 选择器指定运用字体的文本,与此同时专用于 Web 展示的 woff 格式字体也得到各大浏览器厂商支持,进一步减少了字体的体积。在国外,WebFont 已经非常流行了,大量的网站使用了 WebFont 技术,而业界大佬 Google 也顺势推出的免费 WebFont 云托管服务,这一切均带动了国外字体制作行业的高速发展。

相对图片,Webfont有如下优势:

  1. 支持选中、复制

  2. 支持Ctrl+F查找

  3. 对搜索引擎友好

  4. 支持工具翻译

  5. 支持无障碍访问,支持朗读

  6. 字体是矢量图形,支持矢量缩放,自动适配高清屏

  7. 文本修改方便

  8. 字形可以重复利用,节省网络资源

你所不知道的Webfont就是有这么多的特色,快速访问逐浪字体网:www.ziti163.com了解更多。

姗姗来迟的中文Webfont相关推荐

  1. 中文WebFont探索

    本文主要讲中文webFont的相关知识,包含了业界现状.WebFont优势.实现方案等. 一 业界使用WebFont现状 1.1 英文WebFont使用现状 英文版已使用非常广泛.比较有名的字体库:G ...

  2. 迟到的中文 WebFont

    (前端工程师福音,收藏一下) 三年前,有一个设计师面试一位 Web 前端工程师,其中有一段这样的对话: "如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持 ...

  3. 您的下个中文网站可以使用的5个高质量中文Webfont

    你有没有考虑为什么中文网站的版式风格不像大多数现代英文网站那样丰富?您想了解如何让您的下一个中文网站项目更吸引用户的眼球么?继续往下读吧-- 根据Smashing Magazine进行的一项调查显示  ...

  4. web设计经验七13步打造优雅的WEB字体

    今天,大多数浏览器已经默认支持Web字体,日趋增多的字体特性被嵌入最新版HTML和CSS标准中,Web字体即将迎来一个趋于复杂的崭新时代.下面是一些基本的关于字体的规则,特别适用于Web字体. 原文地 ...

  5. 字蛛(FontSpider,中文字体压缩器)网页自由引入中文字体

    之前看过设计师面试一位 Web 前端工程师,其中有一段这样的对话: "如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?" &q ...

  6. 中文字体压缩器——字蛛

    网站多处使用中文特殊字体,而导入字体文件随便十几M,做成图片又不好维护,介绍一个简单实用的字体压缩工具. 中文字体压缩器--字蛛 css font-face 引入中文字体必备神器 字蛛通过分析本地 C ...

  7. CSS字体:Webfont在线字体与外部字体及操作系统预装字体使用指南

    前言 熟知,从HTML4时代把图标做在一张图上使用css background来提高页面加载速度到"扁平化UI"趋势的到来,再到"手机UI"简洁化设计的大浪潮的 ...

  8. 【ttf 压缩】html网页引用中文字体,文件过大,加载缓慢的解决办法【字蛛】【web font】

    [以下有部分内容引用的网络文章] 我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题, ...

  9. html5字体统一解决方案

    背景介绍: 因为项目有涂鸦同步的功能 ( 例如在电脑上画一条直线 需要把这条直线同步到各种端) 所以需要保证h5内容区域在各种设备上都保持一致 众所周知 字体在不同设备平台上 支持程度是不一样的 那么 ...

最新文章

  1. 我的这10年——从机械绘图 到 炼油 到 微软MVP 的华丽转身
  2. Focal Loss笔记
  3. win7系统怎么查看服务器IP地址,win7系统的ip地址在哪 小编教你怎么查看
  4. 把blogengine当作cms作公司网站
  5. CentOS启用sudo方法
  6. Entity Framework Core 之数据库迁移
  7. android悬浮功能实现,Android实现系统级悬浮按钮
  8. 鼓励自己最有效的20个方法
  9. ubuntu中pycharm无法输入汉字
  10. 用大数据看中国美食咸甜之战
  11. SVN客户端的使用方法
  12. php城市 省份,怎么获取省份和城市?
  13. RAR与ZIP区别,哪个比较好用!
  14. uc手机浏览器 手机模拟_UC浏览器开发者版调试手机页面
  15. ibm入职测试题太难了_IBM面试的IQ测试题
  16. linux中来宾用户权限,linux权限分配
  17. ElastiSearch与Solr和Lucene
  18. [FromLOL]了解其他职业
  19. 合格的MySQL管理员必备备份恢复与日志管理,对MySQL进行简单的操作
  20. `Computer-Algorithm` 有向无环图DAG

热门文章

  1. mysql 双机 热备,mysql双机热备 my
  2. 【Servlet】多个Servlet之间数据共享实现方案(ServletContext/Cookie/HttpSession/HttpServletRequest)
  3. Yii2 模块化开发 配置
  4. 位, 字节和字 bit, byte and word
  5. windows+vscode搭建远程linux开发环境
  6. 【论文】期刊和会议如何查询、期刊级别分类和顶会概念一文精析
  7. 柏林噪声算法制作地图+小地图
  8. C++ 函数指针和函数类型
  9. UG\NX二次开发 获取所有子部件 UF_ASSEM_ask_all_part_occ_children
  10. IBM扩大与保险经纪公司Marsh的区块链合作伙伴关系