浅析Web 字体的未来

  一直以来,Web 字体背着单调的恶名,因为想在网页上显示一种字体,该字体文件本身必须存在于用户的电脑中,由于这个限制,加上 Web 用户可能分散于各种操作系统,只有那些在各种环境都普遍存在的字体才会被用于网页。

  

  CSS 可能为这个问题带来一线曙光,CSS 包含一个 @font-face 定义,你可以指定一种位于某个 Web 服务器上的 TrueType 或 OpenType 字体。 Safari, Firefox 3.1 目前均支持 @font-face,Opera 也计划在未来的版本中支持该定义。这三种浏览器目前覆盖了30%~50%的用户,对 Web 设计者来说,这个数字已经足够大。至于 IE 用户,我们可以为他们提供单独的 StyleSheet。

  然而值得疑虑的是,那些字体的设计者可能未必愿意将自己的字体放到 Web 服务器,那会使字体盗用变得更容易。Web 设计师 Richard Rutter 提出了一个解决方法,他发现了一个让字体嵌套到网站的方法,字体设计者可以将字体同网站域名绑定,只有指定的网站才能使用。

  除了 Rutter 的方案,微软的 EOT 技术也企图推动 Web 字体的发展,但 EOT 内置了一种类似 DRM 的技术,可能会导致问题重重(使用了 DRM 技术的 WMA 就是一个例子,任何曾尝试播放包含 DRM 的 WMA 文件的人都不愿再见到这个词,译者曾喜爱至极的博客思听自改用 DRM 以来,我再也没成功地收听过任何一段书摘 - 译者)

  关于中文 Web 字体问题,可能要复杂得多,因为中文字体动辄几个MB大小,用户在访问一个网页之前,先下载一个几MB的字体是不现实的。另外,中文字体的字号的选择也要十分谨慎,12px 的宋体在屏幕上可以正常显示,然而 12px 的黑体却很难看,黑体至少要 13px 或 14px 才可以平滑地显示。 - 译者

  本文国际来源:http://www.webmonkey.com/blog/The_Future_of_Web_Fonts_Looking_Brighter

  中文翻译:COMSHARP CMS 官方网站

时间: 2024-09-09 06:38:00

浅析Web 字体的未来的相关文章

Web字体格式介绍及浏览器兼容性一览

目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体,主流的浏览器都支持这项技术,本文介绍主要的几种Web字体格式及各浏览器兼容情况. Web字体格式介绍TrueType (.ttf) Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输

Web字体应用修炼之道(上)

故事的起源,要从UED界两大种族前端设计师和视觉设计师的爱恨说起: 设计师的视觉稿: 前端开发出来的真实效果: 于是战争爆发了: 像这种视觉效果不一致问题,在日常开发中比比皆是.最近遇到的比较多的是字体问题,开了写轮眼的设计师经常抱怨手机上的字体跟设计稿不一致,前端只能无奈的回一句手机上没这字体啊...然而实际情况远比这个复杂,正义的王二小见此情况决定挺身而出,踏上了Web字体修真之路,来寻找传说中的最优解. 从0开始 这将是一次冒险,我们从0开始探索网页中的文字是如何一步步呈现在我们眼前的.计

CSS3之嵌入Web字体

   之前如果想在自己的网站使用某些好看的字体,总是迫不得已得在PS里先把字体图片做好.虽然这样做也能达到我们想要的效果,但是这样就增加了HTTP请求 (如果在多处使用的话),即使合并所有图片,也不好管理,灵活性不高,哪一天想换种更好看的字体,那工作量,想想都没劲!幸好CSS3新增了@font-face模块,可以帮助我们轻松解决Web页面中使用优雅字体的方式,而且我们可以根据需要自定义多种字体,但是每个@font-face只能定义一种,若需要多个字体就启用多个@font-face规则.     

免费程序IcoMoon:把矢量图转换成Web字体

文章描述:在这篇教程中,我们将看看如何使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体.然后在看看如何使用生成的字体通过css应用到Web页面中. 我已经制为网站制作了一些优雅的图标,并且在新的网站和老的iPad上进行了测试.正常尺寸下,布局看看上去一切OK,但的将页面进行放大显示,我却发现我的icon变得模糊不清,但是基于文本的标题依然清晰可见.在具有Retina显屏的iPad上,这些图标看上去都不清晰,即使在没有进行任何放大的情况之下. 我第一想法就是创建双倍大小的Spri

Google Web 字体 API 访谈

对很多纠结于字体的 Web 设计与开发者而言,昨天有关 Google Font API 的新 闻着实让他们高兴了一回,这个非常简单实用的 API 包含了一套字体库和预览工具,结合 Google 与 TypeKit 联合开发的开 源 WebFont 加载工具,Web 设计者们在自己的站点中引用个性字体变得轻而易举. Google Web 字体 API 的使用非常简单,只需从 Google 那里链接一个 CSS 文件并 在你自己的 CSS 定义中引用字体名即可,这里有一个演示可以参考.事实 上,Go

10个增强WEB字体排版的JQUERY插件

  虽然Web字体版式技术在各种定制化字体解决方案(比如@font-face, Google Fonts)的支持下一路蓬勃发展,但是在我们在设计和桌面app开发中仍然对其缺少精准的控制和把握.还好有一系列的强大功能jquery插件帮助我们解决这个问题.这篇文章详细介绍了近10个最流行的Web字体版式插件,它们允许我们润色字体版式并创造出更多超级酷的效果. 不得不说,网站本身也创意十足,个性满满哟:) Lettering.js Lettering.js 是最简单最流行的网络版式插件之一.通过分拆每

关于web字体的那些事儿

  我曾与一位视觉设计师合作共同开发一款web应用.他提交给我的设计稿看起来非常带感,于是我根据他的设计稿,用HTML和CSS将web应用写了出来.当我以为一切都已完成,并且火急火燎地将产品给他看的时候,知道他说啥了么? "你全做错了." 的确.我并没有根据他的模型来使用字体,为此他专门把我叫出来并告诉我这是一个非常大的错误.我该如何弥补呢? "我不知道.但是目前它是最大的问题,毫无疑问." 说起来,在过去的很长一段时间里,我都同不同的网页设计师一起合作开发各种不同

如何把你的图标转换成WEB字体

  我已经制为网站制作了一些优雅的图标,并且在新的网站和老的iPad上进行了测试.正常尺寸下,布局看看上去一切OK,但的将页面进行放大显示,我却发现我的icon变得模糊不清,但是基于文本的标题依然清晰可见.在具有Retina显屏的iPad上,这些图标看上去都不清晰,即使在没有进行任何放大的情况之下. 我第一想法就是创建双倍大小的Sprite图,然后通过css样式,设置他们只显示二分之一尺寸.虽然这样的方法让他们在Retina屏上显示的大小是正常的,一旦你开始放大屏幕,图标又变得模糊不清.但文本还

《HTML5+CSS3网页设计入门必读》——6.4 使用Web字体

6.4 使用Web字体 在上一节中,看到我们十分确信所用的字体系列驻留在每个人的计算机上.也就是说,可以保证大多数计算机都会呈现Arial或Times New Roman,或者具有用于serif和sans-serif的所必需的默认字体,如果这是样式表所需要的话.但是,利用CSS3中包括的@font-face特性,甚至可以对在线放置的内容发挥更大的设计能力. 简而言之,@font-face特性允许在HTML5标记中定义要使用的字体,使得无论用户是否在他们的计算机上安装了那些字体(并且很有可能用户没