网页设计师如何使用GOOGLE在线字体

为了让网页设计更加灵活,Google从2010年5月19日启动了网页在线字体服务,并一口气发布了十八字体族。但与 Monotype Web Fonts、FontShop 等字体商不同,Google 这次开放的字体与它其他很多服务一样,完全免费

目前网页上使用的字体都是常见的几种,如’Lucida Grande’, Verdana, Arial, Sans-Serif,中文常见的有宋体。

要想用比较个性的字体就比较麻烦了,因为你不能保证客户端是否支持这种字体,常用的方法是用Photoshop把文字制作成图片。

为了让网页设计更加灵活,Google从2010年5月19日启动了网页在线字体服务,并一口气发布了十八字体族。但与 Monotype Web Fonts、FontShop 等字体商不同,Google 这次开放的字体与它其他很多服务一样,完全免费。

Google 目前提供的字体共有十八种,均为目前比较流行的免费字体,包括为 Android 而开发的 Droid 系列,被称为“Fonts for Scholars”的 Cardo,为代码印刷而设计的 Inconsolata,业余之作而不胫走红的 Yanone Kaffeesatz 等等,其中最能引人注目的是字体师 John Fell 设计的 IM Fell 字体。

我想每个网页设计师都会觉得这是个好消息,又一个来自Google的福音吧!

想使用它们吗?使用这些字体无需付费,也不必注册,只需要做简单的几步,举个例子,如果你想在你的网页中使用“Tangerine”这种字体:

1.在网页头部加入代码

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

2.在你的CSS样式表中加入

body {
font-family: 'Tangerine', serif;
font-size: 48px;
}

(注:这是让页面所有元素的字体都变成Tangerine,如果只想局部Tangerine字体只要改变CSS选择器就可以了!)

3.刷新查看效果!

好了简单吗?

如果想详细的了解Google在线字体的话,请到官方主页http://code.google.com/webfonts

详细使用方法http://code.google.com/apis/webfonts/docs/getting_started.html

时间: 2024-08-20 07:51:57

网页设计师如何使用GOOGLE在线字体的相关文章

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

写在这篇文章之前:中文网页字体的窘境 在国外的设计师幸福地讨论着如何不用图片进行字体替换时,当Google Proudly地提供越来越多的web fonts时,使用中文的网页设计师只能发出一声叹息.中文世界的网页字体窘境,不仅仅是由于中文符号过多造成的字体文件过大这样的技术阻碍;更深一层的原因是,根本就没有几种可用的好字体. 一方面,尽管一些中文字体提供商也在致力于提供不同平台的解决方案,字体价格还是贵得令人乍舌,方正字库的年费高达万元,这对普通设计师来说很难承受.另一方面,制作中文字体是吃力不

中文网页字体:网页设计师的字体替换方法

文章描述:网页设计师的字体替换方法指南. 写在这篇文章之前:中文网页字体的窘境 在国外的设计师幸福地讨论着如何不用图片进行字体替换时,当Google Proudly地提供越来越多的web fonts时,使用中文的网页设计师只能发出一声叹息.中文世界的网页字体窘境,不仅仅是由于中文符号过多造成的字体文件过大这样的技术阻碍:更深一层的原因是,根本就没有几种可用的好字体. 一方面,尽管一些中文字体提供商也在致力于提供不同平台的解决方案,字体价格还是贵得令人乍舌,方正字库的年费高达万元,这对普通设计师来

网页设计师设计网站时要考虑在线广告的设计

很多客户网站多会放一些在线广告,所以作为网页设计师有时候在设计网站时,必须得考虑到客户的这种需求,将在线广告也作为设计的一个组成部分进行考虑. 近年来,广告已成为很多网站的主要收入来源.不久前,在线广告往往遭到访客的拒绝,广告客户也不确定它的价值和效力.今天,大多数访客期望在商业网站上看到广告,广告客户已经认识到各种在线广告的潜在机会.长期以来广告一直是印刷出版物的一部分,如杂志和报纸,现在它们已经在网上期刊和出版物扮演同样的角色. 网站所有者或者发布的产品和服务总是会担心广告存在的影响,同时它

给网页设计师的10个免费在线学习网站

  对于一个互联网从业者,持续不断的学习是不可避免的.新的技能是成长的必要条件,也是改变职业生涯的基石.想成为一名优秀的网页设计师.前端,不断砥砺技术,掌握新知识是必修课.还好网络上的在线课程和各类文章越来越多,在系统和完善程度上也做的颇为不错,所以即使你只是一个初学者,也能通过一系列系统的课程,称为了一个称职的设计师.开发者.当然,不论课程是收费还是免费,最重要的其实还是你自己的坚持,只有持之以恒,才能抵达目标. 当然,你的部分你来完成,而我除了鼓励,能给你的,就是这些精心挑选的在线课程了.这

网页设计师参考:网页设计和网页工具网站

作为国内的网页设计师会经常访问一些国外知名的网页设计类网站,有提供网页设计欣赏的灵感类,有提供编码与工具下载的,还有提供网页测试的.这些网站对于网页设计师都十分有用,建议经常关注下. 本文将会展示一些web设计师应该经常会使用到的工具.如果你需要一些灵感,你可以访问最流行的设计展示站点来寻找你需要的好作品和好例子.一些设 计相关的工具,在线生成器,免费字体站点,模板站点都将帮助你更有效率测试和管理站点.记住,并不是什么都亲自完成才是最好的方式,一定程度的借鉴将会让 你以更轻松的方式完成任务. 我

网页设计师今生应该去的10个地方

  每个领域都有其神圣的地方,即该领域发展至关重要的地方.就好像艺术家们习惯了要去佛罗伦萨参观米开朗基罗等,所以网页设计们在有生之年也应该访问一下自己领域最神圣的地带. 遗憾的是还是有不少依赖web的专业人士不知道自身行业的历史,特别是新一代年轻人,他们视互联网为理所当然之事.为了解决这个bug,这里咱们列举出10个web设计师应该至少访问一次的地方,记住!一辈子至少要去一次! 1.Googleplex(谷歌公司总部) 是Google公司总部的名称,位于美国加州圣克拉拉县的山景城,离旧金山很近.

网页设计师必备的11款PS插件

  时至今日,各种工具和插件已经多如繁星,而且通常最好和最有用的工具都是收费的.为此,我们专门整理出了这些免费优质的Photoshop 插件,希望能对网页设计师和爱好者们有所帮助. Layrs Control 适用版本:CS6,CC 这是一款基础的PS插件,为你提供日常使用的支持.在这款图层控制插件的帮助下,你可以轻松删除无用的图层效果,删除空白无效的图层,栅格化智能对象,还可以根据扁平化的设计规则将视觉元素扁平化.在扁平化流行的今天,也许这款插件正是你所需要的. Cut&Slice 适用版本:

为网页设计师而生的14个文本编辑器

  可视化的工具的易用性通常非常优异,因为它更符合人们交互和操作的自然逻辑.不过,要精准控制网页和程序,你总需要一款称心如意的文本编辑器来帮你搞定代码,哪怕是视觉至上的Adobe都会在Master套装里面保留Dreamweaver. 的确,从某种程度上来说,文本编辑器看起来没有可视化程序那么高大上,但是多年以来网页开发的方式和基本流程都没有本质上的改变,因此网页开发也无法和文本编辑器割裂开来.热爱文本编辑器的开发者和设计师都很清楚,一个得心应手的文本编辑器不仅高效而且具备良好的可控性,助力设计,

网页设计师指引:当前的网页设计趋势

文章描述:设计师和开发者都需要和市场接轨并跟上潮流的脚步,但是所谓的潮流是当下的,未来确是未知的.我们的确需要保证自己不被行业趋势甩到队尾,但更重要的是在浪潮中适应和学习. 技术的革新带动了设计行业的的迅猛发展,这使得设计师和开发者有了更广阔的的探索天地.而网页设计也越发不再那么循规蹈矩,许多团队和公司都做了很多思考和创意.所以在我们适应着现代设计潮流的同时,不妨也来看看现阶段网页设计大致的趋势和风格吧.我不敢大言不惭的说这就是当下网页设计的趋势,这只是本人对当下网页设计做出的一些小总结.希望这