`
ruziniu
  • 浏览: 18390 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

网页设计师的字体替换方法指南

阅读更多

写在这篇文章之前:中文网页字体的窘境

在国外的设计师幸福地讨论着如何不用图片进行字体替换时,当Google Proudly地提供越来越多的web fonts时,使用中文的网页设计师只能发出一声叹息。中文世界的网页字体窘境,不仅仅是由于中文符号过多造成的字体文件过大这样的技术阻碍;更深一层的 原因是,根本就没有几种可用的好字体。

一方面,尽管一些中文字体提供商也在致力于提供不同平台的解决方案,字体价格还是贵得令人乍舌,方正字库的年费高达万元,这对普通设计师来说很难承 受。另一方面,制作中文字体是吃力不讨好的事,几千个符号和26个拉丁字母完全不在一个量级上;使用正版在中国一直是会呼吸的痛,花大力气做出来的字体, 拿不到多少钱,这又降低了制作好字体的积极性。

中文网页的常用字体,过去只有“宋体”,现在微软增加了“雅黑”,但“雅黑”还算不上安全字体。在迫不及待地使用雅黑时,我们仍然要注意降级问题。由于雅黑的字体大小、字距和宋体都有区别,我们需要注意降级后,各个用户代理在排版上可能出现的问题。

使用非标准字体,最好的方案依然是图片替换。关于图片替换术已有许多文章论述,方法也各有优劣,需要注意的关键点是:

1 可用性:注意在无CSS或无图片的情况下,依然能保证文档内容的完整性。尽量减少额外无意义的标签。

2 图片负载:利用GIF、PNG8、JPG各自的特点,有针对性地制作替换图片,能有效地减少不必要的图片尺寸。在几种格式中,首推PNG8,即使在IE6中它的透明背景也能被正确显示。PNG8使用的技巧是,输出时把“杂边”设置为和背景接近的颜色。

总而言之,中文网页的字体,还没有接近完美的解决方法出现。就像下面这篇文章会告诉我们的,完美不值得等待,只有积极地采用更新的技术,创造更好的 作品。而无论中英文字体,是否采用非标准字体永远只是一个技术问题,更重要的是设计师对字体的理解。我们能否理解每一个字符方寸笔画之间的蕴含的意味,并 适当地用在设计中,这是我们这些相对落伍的中文世界设计师要艰难完成的任务。

正文:

受够了Arial?厌倦了Times New Roman? 文字替换术(font-replacement methods)在过去的两年中发生了显著的改善,但如果你没有持续关注这项技术,往往很难说出这些方法有什么不同。这篇文章将讨论现今可用的不同的文字 替换技巧。

我们将探讨每种技术的优点和缺点,字体使用授权,以及网络上最好的字体资源,以便于你能在自己的网页设计中开始使用它们。

入门:字体替换术

Since the beginning of the web, designers have been restricted to a limited number of fonts

从网页诞生之初以来,设计师们一直被有限数量的字体所束缚。

网页设计的潜力看起来正在一天天地增长。HTML5,CSS3和Javascript这样的技术应用带来了很多令人惊喜而有创造性的网站设计。从纯文本的浏览器时代以来,网页已经走过一段很长的路。尽管如此,网页设计中仍然有一个领域相对而言依然停滞不前。

在任何设计师的“兵工厂”里,要创造网站的外观和“感觉”,排版和字体选择是不可或缺的元素。不幸的是,自网页诞生之初,设计师们一直被有限数量的 字体所束缚。能被大多数的网页用户正确显示,设计师能安全地使用的,还能让人提起兴趣的字体是极少的,Helvetica,Arial和Georgia是 其中的三种(别忘了Comic Sans)。

为了摆脱这种限制,用字体来表达创意,设计师使用的传统方法是把文字合并到图片中——然而这种方法有许多的缺点。增加了很多可用性问题,并随着加载时间增加,网站的性能也相应地受到负面影响。

这篇文章会探讨一些在网页中不用图片加入非标准字体的方法。我们会看到每个方法的优点和缺点,字体的使用授权,以及这项技术对网页设计师到底意味着什么。

Cufón

要在网页中加入非标准字体,使用Cufón是一个简单、有效得难以置信的办法,它的功能不需要依赖服务端的语言或插件。Cufón只需要几行 Javascript代码就能工作,它使用HTML5的画布特性渲染字体,并为Internet Explorer使用VML(Vector Mark-up Language向量可标记语言)渲染字体。

Cufón在主页上提供了一个字体转换工具,它能将你选择的字体转换为SVG,并为你创建一个Javascript文件,你需要在html中引用它。Nettuts+的Jeffrey Way曾写过一篇关于如何在你的网页中集成Cufón的step-by-step优秀教程

Cufón对很多网页设计师来说是一个很流行的选择,因为它有许多优点,相对来说几乎没什么缺点。它不依赖其它脚本语言或插件,这意味着它对相当大 部分受众都是可用的,并且被近期所有的主流浏览器所支持,包括IE9。你还可以直接对Cufón替换的文字应用CSS样式,包括比较新的CSS3特性,例 如渐变。考虑到速度,它比sFIR要快得多,而且没那么密集,但它仍然不应该被用在主体的大段文字上。

优点:

不同的浏览器间很不错的兼容性

可以在你的字体中的只包含字符里的特定集合(ABC,123,等等),以便于控制文件体积。

CSS字体样式在所有的浏览器中都能保持(颜色、尺寸、阴影⋯⋯)

缺点:

文字无法选择

表现:最好在顶部、标题和副标题中使用

特别的样式(文字修饰、翻转等)需要一些额外的工作。

@font-face

“@font-face is essentially the ultimate solution for fonts on the web.”

@font-face基本上是网页中字体的最终解决方案。

在所有的字体替换方法中,@font-face可能是受到关注最多的。但这是有充分原因的。@font-face基本上是网页中字体的最终解决方 案,在它被真正的实现之前,其它技术都想替代它的位置。其实在CSS2特性中就包含了@font-face,但直到今天它才被广泛地采用。

@font-face在网页上实现自定义字体,使用的技术无非是CSS——这意味着不再依赖于Flash,PHP甚至Javascript。当使用@font-face时,渲染的是真正的字体,而不是向量对象或图片,因此文本可以被选择、放大,使用CSS修改样式。

不幸的是,就像其它和网页有关的事情一样,首先阻碍@font-face发展的就是浏览器(还有使用授权,我们会在下文中讨论)。每一种主流浏览器 的字体格式是不同的。Internet Explorer使用.EOT(Embedded Open Type),而近期的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-face,唯一还要提出的小问题是,因为它呈现的是真正的字体,不同的浏览器和操作系统的渲染效果会有细微的区别。一些网页字体服 务会使用字体微调来协助修正这些细微的差异,字体微调会在浏览器中平滑字体的轮廓,创造出更好看的字体。我们会更深入地探讨这些服务。

如果你需要更多关于如何在网站中实现@font-face的信息,Jeffrey Way又一次提供了一篇非常有用的教程。

优点:

保持了可用性——这意味着它能优雅降级

支持Unicode

支持CSS字体样式

缺点:

一些字体文件下载起来比较大

不同浏览器之间没有统一的格式

不允许发布(据我们所知)——在确认你的发布许可之前,不能在模板或主题中使用。

接下来的解决方案依赖于@font-face来实现——每一个多少都算是一种服务——这意味着:它们都使用同样的基本技术,但是它们提供不同的字体库,授权选项,以及支付计划;是的,大部分是需要付费才能使用,但这可能就是所有网络字体的未来。

Font Squirrel @font-face Kits

Font Squirrel或许是现在最流行的文字替换资源。Font Squirrel让你忘掉所有对字体授权可能有的担心,因为它提供的所有字体在商业上都是免费的。这个网站有数百种字体供选择,从sans-serif到novelty风格的字体都有。

就像之前提到的,为了保证@font-face在所有浏览器中都能工作,你需要几种不同的字体格式,对此,Font Squirrel也有解决方案。网站提供了@font-face套件,其中有你需要的所有字体格式,以及HTML和CSS。如果你找不到你想用字体的 @font-face套件,他们同样免费提供了生成器,能将你的字体转换为所需的多种格式。使用生成器时,你需要保证你拥有使用这个字体的正确授权。

优点:

使用@font-face,但实现起来容易得多

他们处理所有的授权相关的事项

数百种字体可供挑选

包含多种格式(TrueType, EOT, WOFF, SVG, Cufon等等)

如果他们没有你想要的字体,你甚至可以生成你自己的套件

缺点:

和@font-face一样,不过通常来说,这是一个非常棒的解决方案

Google Fonts API

Google Fonts API的使用结合了他们自己非常独有的字体目录,目录中的所有的字体都是开源的,所有人都能使用。这个目录一直都在扩展和增长,目前已经包含了超过200个例子。

要把目录中的字体用在你的网站上,真是简单得不能再简单了。你只需要选择你想用的字体,选择想要的字体变体,Google会向你提供一行你需要用的Javascript代码。修改css,列出这个字体,你就准备好了!这真的非常简单。

优点:

开源授权意味着这些都是免费使用的

字体放在Google的服务器上,所以你的字体可能已经在浏览器的缓存中

缺点:

呃……

Typekit

Typekit是第一个提供预订网页字体服务的网站,并仍然非常流行。Typekit以及其他类似的服务网站解决字体授权的方法是:缴纳年费,会员 就能访问大量的自定义字体。这种方法允许字体的制造商为他们努力的工作收到一些回报,并防止了字体的盗版,因为所有的字体都放在Typekit的受保护的 服务器上。用户不用把字体放在他们自己的网站空间里,只需要简单的链接即可。

Typekit和一些世界上最大的字体制造商合作,为你提供了广泛而多样的字体。Typekit还提供了很多字体使用的选项和控制。你可以选择不同 的字体变体、粗体和字型。你还可以创建CSS栈,选择当@font-face不被支持时的降级字体。一旦你做好了选择,网站会生成一段需要你放在网站上的 Javascript代码。

Typekit的另一个优点是它能微调字体,帮助控制不同浏览器处理文本和字体的差异。

Typekit提供了不同的价格包以适应不同的需求。免费的包提供Trial Library中的两个字体,只能在一个网站上使用。这个网站每月最多允许25,000次页面浏览(Page View),并且你必须在网站中显示Typekit的标志,链接到你使用字体的信息。而相应的,规模最大的是性能包(Perfomance package),它提供所有字体的使用权限,不限网站数量和浏览量。所有这些的年费是99镑。

优点:

字体选择很多

字体放在Typekit的服务器上

缺点:

每年都需要交钱

抗噪不是很完美,一些字体可能在一些浏览器和操作系统中看起来有锯齿,没有抗噪

Fonts.com Web Fonts

流行的字体资源font.com也开启了一项专门的网页字体服务,他们自称提供了超过8,000种字体由你在网站上使用。和Typekit类似,它 提供的是基于的预订的服务,但它的价格是月度的。和Typekit相比,它的价钱并不贵,但字体的限制要少得多。免费包相比之下相当的友好——无限制地使 用8,000种字体,不限网站数量。专业包允许你下载50种字体到你的电脑中,并在设计中使用这些字体。

Fonts.com网页字体自夸他们的字体集中有一些真的非常棒的字体——例如Helvetica, Univers和Franklin Gothic。

优点:

非常多可选择的字体和样式

字体放在Typekit的服务器上

独有的Helvetica®、 Frutiger®、 Univers® 和其他有名的字体

缺点:

如果他们的免费服务无法满足你,需要交年费

他们的字体库其实相当的大,但能使用的很有限

 

Fontdeck

曾为一些世界上最大的企业服务的著名网页设计公司Clear Left与OmniTI合作,发布了Font Deck。Font Deck是另一个基于预订的服务商,但你只需要为使用的每个单独的字体付年费,这对那些只想在个人博客中使用一到两个字体的人来说很完美。

字体的价格最低为单个域名2.5美元/年,不限页面浏览量。全部的字体都可以无限期免费试用,但只有20个独立IP可以浏览。这个免费包有助于弥补无法下载字体到本地的缺点,你在设计阶段就能使用它们。因为Font Deck相对来说很新,目前字体的选择很少。

优点:

只需要为你需要的付费

在网站上预览字体是免费的

语言支持

缺点:

它依然是需要付费的

他们的字体库其实相当的大,但能使用的很有限

Font Spring

Font Spring采用了和预订服务有些许区别的方法,它回到了传统的购买字体的路子上。字体是独立购买的,你需要下载他们,并放在自己的服务器上。Font Spring认为提供的字体中99.9%都可以通过@font-face方式使用。

每个独立的字体的价格都不一样,要用@font-face方式使用字体,你需要额外支付费用。@font-face授权包括桌面OpenType版本和在web上需要的其他格式。

用这个方法有很多的优点,如果你真的只心仪一种字体,和预订服务相比这可能会更便宜。你可以在任意多的域名中使用,因为你能直接控制它们,并且页面浏览量也没有限制。

作为一个附加的警告,使用其他技术如sIFR或者Cufón转换或植入这些字体是被禁止的。

优点:

像Font Squirrel一样,它为你处理了授权相关事项

又一个很棒的字体库,有很多不同的字体制造商

缺点:

每一个字体都需要付费,这可能需要很多钱

你需要把字体放在自己服务器上

其他字体替换解决方案

这些只是可用的字体服务中的一部分。还有很多提供服务的网站,例如Typotheque和Webtype。他们都各有优势和劣势,你应该基于个人的 需要做出选择。一些人可能看中预订服务的简便,而另一些人可能不喜欢把网站的一部分控制权交给第三方。如果你是后一种情况,你最好使用像Font Squirrel这样的,下载你自己的字体,并放自己的服务器上。

接下来的两个(sIFR和FLIR)通常被认为是“守旧派”,因为它们都有很明显的问题,但是它们是值得讨论和了解的。

sIFR

sIFR已经出现了好一段时间了。当我们确实除了图片没有其他选择时,它第一个出现了,提供了一个很有效的引入非标准字体的方法。sFIR(即 Scalable Inman Flash Replacement)结合使用了Flash和Javascript来将页面上的文本修改为Flash元素。sIFR有许多优点,例如文本保持了对屏幕 读者的可用性,也可以被选择。

然而名字中的“scalable”可能会造成一些混淆。sIFR的可放大的意义是,Flash元素放大至原有浏览器文本的尺寸——这允许它拥有最大 的尺寸可能性,能以任何给定的尺寸显示文本。然而,当用户调整页面的文本尺寸时,任何已经被Flash元素替换的文本大小是无法改变的。这显然会造成一些 可用性问题。sIFR同样需要用户的电脑启用Flash和Javascript才能起作用。

sFIR的创造者之一,Mike Davidson同样认识到这项技术的局限性。Mike曾公开表示,sFIR不应该被用于大段的文本,因为它会对网站的性能有显著的影响。Mike同样认 识到他的技术并不是网页排印的最终解决方案,他只是简单的引用了这个词“权宜之计”。

优点:

没什么大的优点……除了它是出现的第一个字体替换方法。

缺点:

依赖于Flash

降低性能

阻拦广告和Flash的程序也会阻拦它

很难完美地修改样式——常常和你期待的效果不一样

FLIR

FLIR(即Facelift Image Replacement)和sIFR类似,除了它使用Javascript和PHP来生成图片,而不是使用Flash来替换文本。这种方法明显的好处是, 你不需要花时间为每一段你想用自定义字体的文本创建单独的图片。如果你觉得用另一种字体或者颜色,更新你网站的文本也会更容易一些。

不幸的是,FLIR除了使用简便和节省时间以外,相比传统的将文本存成图片,它并没有提供更多改进。最终结果是文本依然以图片的形式渲染,文字无法被选择或放大。

优点:

在所有主流浏览器中都能工作

缺点:

较大的负载

文本无法被选择

服务器需要支持PHP和GD……这往往是不提供的

字体授权和合法性

字体授权问题正在不断发展。它有助于字体替换方法的缓慢进程和采用。就像图片一样,你需要作者的授权才能在网站中使用字体,授权是以 EULA(End User License Agreement终端用户授权协议)的形式。一些授权允许字体被免费使用,甚至用在商业用途中。而另一些可能只允许个人在本地的电脑上使用。

当使用上述的某种字体替换方法时,你实际上在你的网站植入了一个字体,或者链接到一个上传到你服务器的字体。即使是免费的字体授权,这也是不允许多 人使用的。许多字体创造者和制造商都不允许这样的原因是,它会让网站的用户直接访问字体文件,他们开始担心他们的字体可能被下载并非法传播。这个问题让很 多字体制造者不允许他们的字体通过@font-face使用。

因此,当使用上述的方法时,你绝对要确认字体的授权是允许的,这非常的重要。

还好,这个问题没有完全阻碍字体替换方法的发展,还有很多可用的资源允许你在网站上使用自定义的字体。

最后的思考:这对设计师们意味着什么

“Perfection is not worth waiting for, if you do, you risk missing out on exciting new opportunities”

完美不值得等待,如果你这么做了,你在冒险错过那些令人兴奋的新机会。

上面我们讨论了很多,对于想在站点设计中使用自定义字体的人来说,很显然有很多种选择。好消息是,所有的方法现在都是可用的。而坏消息是,没有一种 方法是完美的,每一种都有他们自己的优点和缺点,这是实话。@font-face显然是最有希望的,但可能还要过好多年,它才能算得上绝对没问题。事实 是,虽然在网页设计的世界里,情况很难说完美,但是还有很多折中方案,而这些方案需要使用新的技术。完美并不值得等待,如果你这么做了,你在冒险错过那些 令人兴奋的新机会。

这真的是网页设计的一个令人兴奋的时代,网页的排印似乎正在得到更多的欣赏和理解。字体替换方法为创造有创意的新设计提供了很棒的机会,并且我相 信,关键在于不要滥用这项技术。当情况出现问题时总是提供降级的方案,聪明地使用每一种方法(不要像这样改掉你网站所有的文本)。多花一些时间,欣赏和学 习伟大的字体,网页会是一个更好的使用字体的地方。

原文地址:http://webdesign.tutsplus.com/articles/typography-articles/a-web-designers-guide-to-font-replacement-methods/

文章来源:seemeloo.com

分享到:
评论

相关推荐

    网页设计师的字体替换方法指南.txt

    网页设计师的字体替换方法指南.txt

    网页设计师的字体替换方法指南.pdf

    本文将深入探讨网页设计师的字体替换方法,帮助他们克服这些限制,提升网页设计的视觉效果和用户体验。 首先,对于中文网页,由于“宋体”和“微软雅黑”等少数字体是相对安全的选择,设计师在尝试使用非标准字体时...

    网页UI设计PSD源文件.zip_网页UI设计psd源文件_网页设计源码

    在这个“网页UI设计PSD源文件.zip”压缩包中,包含了一份名为“reset-password.psd”的Photoshop(PSD)源文件,这是网页设计师常用的设计工具,用于创建和编辑网页界面的图形元素。 PSD文件是Adobe Photoshop的...

    cad文本批量替换(多文件相同文本)

    在CAD(计算机辅助设计...总的来说,批量替换CAD文件中的文本是一项实用的技巧,尤其对于处理大量图纸的工程师和设计师而言,它可以显著提高工作效率。理解和掌握这个技巧,对于日常工作中确保设计一致性具有重要意义。

    恭贺新禧PSD设计模板

    总结来说,"恭贺新禧PSD设计模板"是一个适用于新年或春节的网页设计资源,包含丰富的设计元素和预设布局,可以帮助设计师快速创建出喜庆且专业的网页设计作品。使用时需结合Photoshop的专业技能和网页设计知识,进行...

    恭贺新禧设计PSD模板

    在这个"恭贺新禧设计PSD模板"中,设计师可以逐层修改各个元素,如背景图像、文字内容、图标、装饰图形等,以适应自己的特定需求。 在网页设计中,使用PSD模板有以下几个主要优势: 1. 时间效率:预设的设计元素和...

    室内装修设计网页模板

    【室内装修设计网页模板】是针对室内装饰设计领域专门制作的一系列网页模板,它们通常包含了一系列预先设计好的页面布局、色彩搭配、图像元素以及交互功能,旨在为设计师或业主提供快速构建专业且吸引人的在线展示...

    性感网页设计十八.pdf

    “8992 A List Apart website”很可能是提到一个以网页设计和开发为主题的知名网站,经常为网页设计师提供行业资讯、技巧和案例研究。 文档中还提到了导航样式,如“36 lists navigation and”、“6264 navigation ...

    网页模板,psd,网页模板

    网页模板是设计网页的一种高效方式,它为网页设计师提供了一个预先设计好的布局和样式结构,可以作为基础来创建新的网站页面。"网页模板,psd,网页模板"这个标题表明我们要讨论的是关于网页模板,特别是涉及到PSD格式...

    网页设计模板

    在实际应用中,使用这个模板时,设计师或开发者需要根据婚纱摄影公司的品牌色调、风格和需求,调整模板的颜色、字体和图像。例如,可以替换"psd10846"中的人物照片,以展示公司的最新摄影作品,同时修改文字内容来...

    templatespace.com 网页模板03

    网页模板是网页设计中不可或缺的一部分,它们为设计师和开发者提供了快速构建网站布局的基础。"templatespace.com 网页模板03"是一个压缩包,包含了适用于商业用途的网页设计资源,如PSD文件和字体,这些都属于网页...

    BL-073_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip

    在网页设计中,PSD模板通常包括导航栏、头部、主体内容、侧边栏、底部等元素,以及色彩搭配、字体选择和图像处理等设计细节,为设计师提供了一个可定制的基础框架。 "USER_GUIDE.txt"文件可能是关于如何使用这些...

    2009年优秀模板比赛第一名之学校网页模板

    通过CSS,设计师可以实现统一的字体、颜色、边距等样式设定,使整个网站风格一致。而HTML(超文本标记语言)则负责网页的结构,两者结合,形成美观且功能齐全的网页。 【文本与排版】 “模板说明.txt”文件可能...

    GR-082_psd网页模板_网站psd效果图切片_PSD欧美日韩风格_前端页面.zip

    PSD是Adobe Photoshop的默认文件格式,它允许设计师保存完整的图层信息、透明度、蒙版、文字等元素,便于后期编辑和调整。在网页设计中,PSD文件通常作为设计初稿,设计师在这里创建并完善网站的视觉样式。 该...

    BL-009_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip

    "06_guide.txt"是一个文本文件,通常用来提供关于如何使用这些PSD模板的指南,可能包括切片技巧、颜色代码、字体信息、图片替换方法等内容。对于不熟悉Photoshop的用户来说,这个文件非常有用,能帮助他们快速理解和...

    楼房图纸设计网站模板是一款建筑设计师HTML5网站模板下载 .rar

    通常,这样的模板会包含头部(header)、导航栏(navbar)、主体内容区(main content)、侧边栏(sidebar)、页脚(footer)等常见网页元素,以及专门展示图纸、项目介绍、设计师简介等专业内容的版块。 在【压缩...

    avia-ui-kit_欧美扁平化网页PSD模板美工UI整站.zip

    在当前的网页设计领域,扁平化设计已经成为一种主流趋势,它以其简洁、清晰的视觉风格,深受设计师和用户的喜爱。"avia-ui-kit"是专为欧美市场设计的一款扁平化网页PSD模板,其设计理念和组件库充分体现了现代网页...

    窗外故事装修公司网页psd免费模板

    这意味着设计师可以通过这个模板来定制自己的网页设计,包括修改文本、替换图片、调整布局等,以适应其品牌需求。 【潜在知识点】 1. **PSD文件格式**:这是一种图层式图像编辑文件格式,由Adobe Photoshop创建。...

Global site tag (gtag.js) - Google Analytics