《网页设计师的字体替换方法指南》由会员分享，可在线阅读，更多相关《网页设计师的字体替换方法指南（12页珍藏版）》请在金锄头文库上搜索。
1、写在这篇文章之前：中文网页字体的窘境在国外的设计师幸福地讨论着如何不用图片进行字体替换时，当Google Proudly地提供越来越多的web fonts时，使用中文的网页设计师只能发出一声叹息。中文世界的网页字体窘境，不仅仅是由于中文符号过多造成的字体文件过大这样的技术阻碍；更深一层的原因是，根本就没有几种可用的好字体。一方面，尽管一些中文字体提供商也在致力于提供不同平台的解决方案，字体价格还是贵得令人乍舌，方正字库的年费高达万元，这对普通设计师来说很难承受。另一方面，制作中文字体是吃力不讨好的事，几千个符号和26个拉丁字母完全不在一个量级上；使用正版在中国一直是会呼吸的痛，花大力气做出来的
2、字体，拿不到多少钱，这又降低了制作好字体的积极性。中文网页的常用字体，过去只有“宋体”，现在微软增加了“雅黑”，但“雅黑”还算不上安全字体。在迫不及待地使用雅黑时，我们仍然要注意降级问题。由于雅黑的字体大小、字距和宋体都有区别，我们需要注意降级后，各个用户代理在排版上可能出现的问题。使用非标准字体，最好的方案依然是图片替换。关于图片替换术已有许多文章论述，方法也各有优劣，需要注意的关键点是：1 可用性：注意在无CSS或无图片的情况下，依然能保证文档内容的完整性。尽量减少额外无意义的标签。2 图片负载：利用GIF、PNG8、JPG各自的特点，有针对性地制作替换图片，能有效地减少不必要的图片尺寸。
3、在几种格式中，首推PNG8，即使在IE6中它的透明背景也能被正确显示。PNG8使用的技巧是，输出时把“杂边”设置为和背景接近的颜色。总而言之，中文网页的字体，还没有接近完美的解决方法出现。就像下面这篇文章会告诉我们的，完美不值得等待，只有积极地采用更新的技术，创造更好的作品。而无论中英文字体，是否采用非标准字体永远只是一个技术问题，更重要的是设计师对字体的理解。我们能否理解每一个字符方寸笔画之间的蕴含的意味，并适当地用在设计中，这是我们这些相对落伍的中文世界设计师要艰难完成的任务。=翻译开始的分割线=原文地址：http:/ New Roman? 文字替换术（font-replacement m
4、ethods)在过去的两年中发生了显著的改善，但如果你没有持续关注这项技术，往往很难说出这些方法有什么不同。这篇文章将讨论现今可用的不同的文字替换技巧。我们将探讨每种技术的优点和缺点，字体使用授权，以及网络上最好的字体资源，以便于你能在自己的网页设计中开始使用它们。入门：字体替换术Since the beginning of the web, designers have been restricted to a limited number of fonts从网页诞生之初以来，设计师们一直被有限数量的字体所束缚。网页设计的潜力看起来正在一天天地增长。HTML5，CSS3和Javascript
5、这样的技术应用带来了很多令人惊喜而有创造性的网站设计。从纯文本的浏览器时代以来，网页已经走过一段很长的路。尽管如此，网页设计中仍然有一个领域相对而言依然停滞不前。在任何设计师的“兵工厂”里，要创造网站的外观和“感觉”，排版和字体选择是不可或缺的元素。不幸的是，自网页诞生之初，设计师们一直被有限数量的字体所束缚。能被大多数的网页用户正确显示，设计师能安全地使用的，还能让人提起兴趣的字体是极少的，Helvetica，Arial和Georgia是其中的三种（别忘了Comic Sans）。为了摆脱这种限制，用字体来表达创意，设计师使用的传统方法是把文字合并到图片中然而这种方法有许多的缺点。增加了很多可
6、用性问题，并随着加载时间增加，网站的性能也相应地受到负面影响。这篇文章会探讨一些在网页中不用图片加入非标准字体的方法。我们会看到每个方法的优点和缺点，字体的使用授权，以及这项技术对网页设计师到底意味着什么。Cufn要在网页中加入非标准字体，使用Cufn是一个简单、有效得难以置信的办法，它的功能不需要依赖服务端的语言或插件。Cufn只需要几行Javascript代码就能工作，它使用HTML5的画布特性渲染字体，并为Internet Explorer使用VML（Vector Mark-up Language向量可标记语言）渲染字体。Cufn在主页上提供了一个字体转换工具，它能将你选择的字体转换为S
7、VG，并为你创建一个Javascript文件，你需要在html中引用它。Nettuts+的Jeffrey Way曾写过一篇关于如何在你的网页中集成Cufn的step-by-step优秀教程。Cufn对很多网页设计师来说是一个很流行的选择，因为它有许多优点，相对来说几乎没什么缺点。它不依赖其它脚本语言或插件，这意味着它对相当大部分受众都是可用的，并且被近期所有的主流浏览器所支持，包括IE9。你还可以直接对Cufn替换的文字应用CSS样式，包括比较新的CSS3特性，例如渐变。考虑到速度，它比sFIR要快得多，而且没那么密集，但它仍然不应该被用在主体的大段文字上。优点：不同的浏览器间很不错的兼容性可
8、以在你的字体中的只包含字符里的特定集合（ABC，123，等等），以便于控制文件体积。CSS字体样式在所有的浏览器中都能保持（颜色、尺寸、阴影）缺点：文字无法选择表现：最好在顶部、标题和副标题中使用特别的样式（文字修饰、翻转等）需要一些额外的工作。font-face“font-face is essentially the ultimate solution for fonts on the web.”font-face基本上是网页中字体的最终解决方案。在所有的字体替换方法中，font-face可能是受到关注最多的。但这是有充分原因的。font-face基本上是网页中字体的最终解决方案，在它被真
9、正的实现之前，其它技术都想替代它的位置。其实在CSS2特性中就包含了font-face，但直到今天它才被广泛地采用。font-face在网页上实现自定义字体，使用的技术无非是CSS这意味着不再依赖于Flash，PHP甚至Javascript。当使用font-face时，渲染的是真正的字体，而不是向量对象或图片，因此文本可以被选择、放大，使用CSS修改样式。不幸的是，就像其它和网页有关的事情一样，首先阻碍font-face发展的就是浏览器（还有使用授权，我们会在下文中讨论）。每一种主流浏览器的字体格式是不同的。Internet Explorer使用.EOT(Embedded Open Type)
10、，而近期的Firefox、Chrome、Safari和Opera都支持.ttf(True Type Format)。一些浏览器也支持开放字体格式（Open Type Format），iPhone和iPad则需要SVG（Scalable Vector Graphics）。这些很让人费解，有时会令很多人望而却步。谢天谢地，还有一线曙光。网页开放字体格式（即.WOFF）被定为网页字体的标准格式，W3C正在对其进行标准化。3.6以上版本的Firefox和5.0以上版本的Chrome已经支持这个格式，根据近期的声明，IE9也支持这个格式。让我们期待Opera和Safari也尽快参与进来。关于font-f
11、ace，唯一还要提出的小问题是，因为它呈现的是真正的字体，不同的浏览器和操作系统的渲染效果会有细微的区别。一些网页字体服务会使用字体微调来协助修正这些细微的差异，字体微调会在浏览器中平滑字体的轮廓，创造出更好看的字体。我们会更深入地探讨这些服务。如果你需要更多关于如何在网站中实现font-face的信息，Jeffrey Way又一次提供了一篇非常有用的教程。优点：保持了可用性这意味着它能优雅降级支持Unicode支持CSS字体样式缺点：一些字体文件下载起来比较大不同浏览器之间没有统一的格式不允许发布（据我们所知）在确认你的发布许可之前，不能在模板或主题中使用。接下来的解决方案依赖于font-f
12、ace来实现每一个多少都算是一种服务这意味着：它们都使用同样的基本技术，但是它们提供不同的字体库，授权选项，以及支付计划；是的，大部分是需要付费才能使用，但这可能就是所有网络字体的未来。Font Squirrel font-face KitsFont Squirrel或许是现在最流行的文字替换资源。Font Squirrel让你忘掉所有对字体授权可能有的担心，因为它提供的所有字体在商业上都是免费的。这个网站有数百种字体供选择，从sans-serif到novelty风格的字体都有。就像之前提到的，为了保证font-face在所有浏览器中都能工作，你需要几种不同的字体格式，对此，Font Squi
13、rrel也有解决方案。网站提供了font-face套件，其中有你需要的所有字体格式，以及HTML和CSS。如果你找不到你想用字体的font-face套件，他们同样免费提供了生成器，能将你的字体转换为所需的多种格式。使用生成器时，你需要保证你拥有使用这个字体的正确授权。优点：使用font-face，但实现起来容易得多他们处理所有的授权相关的事项数百种字体可供挑选包含多种格式（TrueType, EOT, WOFF, SVG, Cufon等等）如果他们没有你想要的字体，你甚至可以生成你自己的套件缺点：和font-face一样，不过通常来说，这是一个非常棒的解决方案Google Fonts APIGoogle Fonts API的使用结合了他们自己非常独有的字体目录，目录中的所有的字体都是开源的，所有人都能使用。这个目录一直都在扩展和增长，目前已经包含了超过200个例子。要把目录中的字体用在你的网站上，真是简单得不能再简单了。你只需要选择你想用的字体，选择想要的字体变体，Google会向你提供一行你需要用的Javascript代码。修改css，列出这个字体，你就准备好了！这真的非常简单。优点：开源授权意
