Google网页字体在线服务

Web前端106.2K阅读模式

目前网页上使用的字体都是常见的几种,如’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">

然后,在你的CSS样式表中加入类似:

  1. body {
  2. font-family: 'Tangerine', serif;
  3. font-size: 48px;
  4. }

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

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

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

原文来自淘 日本

竟然不知道Google还有这么一项服务,不过很可惜没有中文字体,因为大部分漂亮的中文字体都不是免费的,另外中文字体文件也比英文字体体积大了许多...

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
  • Google
  • Web前端
评论  10  访客  10
    • elaphent
      elaphent 4

      这么好的服务,可惜咱们大陆压力很大

      • 木南
        木南 3

        现在上google都是网络链接重置。

        • 韩国
          韩国 5

          css 还真不懂,的学学了。

          • 熊胆粉
            熊胆粉 2

            非常棒的功能

            • Andy Liu
              Andy Liu 0

              请问板主,目前您部落格中的字体,是用google字体的方式吗?
              还是用其他方式,才可以这么漂亮?

              • 小军
                小军 2

                咋就没有中文的啊,不过也挺好的,来给顶下啊

                • 雪狐
                  雪狐 4

                  体积太大是最重要的原因。我以前也想使用这种CSS方法定义字体效果,但是中文字体太大了,以微软雅黑为例,就有15M左右。而英文字体则只有几百KB。而且一些很好看的字体里面字库也不是很全,非常影响实际使用,只有挥泪放弃。
                  先定义font-family,例如:
                  /* @font-face {
                  font-family: “微软雅黑”;
                  src: url(“../fonts/msyh.ttf”) format(“truetype”);
                  }

                  /* @end */
                  然后就可以在下面的CSS中使用这种字体样式了,这样即使访客的电脑上没有微软雅黑字体,他也能看到微软雅黑字体样式的网页。但是中文使用这种的缺陷前面都说过了,所以悲催啊。有兴趣的朋友可以在本地测试一下,很给力的,很多很好看的字体应用在网页上效果不错。

                  • 碎语人生
                    碎语人生 5

                    不知道有没有微软雅黑。

                    • deep
                      deep 4

                      这个非常好呀

                    匿名

                    发表评论

                    匿名网友
                    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                    拖动滑块以完成验证