Archive | 七月, 2011

I liked this: App进化论

26 7月

“云”时代的来临正在改变App和运营团队之间的关系,一场不能避免的变革正在进行。鉴于移动终端的局限性,移动终端上的APP由本地化应用(Native App),到混合型应用(Hybrid APP),再到基于WEB的应用Web App,这一连串的变化都源于技术的更新和市场的需要。

       大一的时候第一次接触到大家口中的“云”,众说纷“云”啊。从当时来看这确实是一个很概念的东西,看的我是一头雾水。后来断断续续也一直在关注着“云”,直到我读到一篇文章后开始对“云”开始真正地有点理解。那篇文章的名字忘记了,文章内容大致是作者预测了押宝Chrome OS的谷歌在未来的竞争中胜出选择发展桌面系统的微软。现在再思考一下有了更深刻理解,以下就是我对“云”时代App的进化的一些看法。(本文只讨论网络应用类型的App)

一、模型假设(一)

  •  
    1. 通讯技术发展早期,用户手机上网平均速度约20KB/S~50KB/S;
    2. 移动终端上网资费非常高,只有少数用户愿意支付相对高昂的费用;
    3. 手机终端上处理器很弱,手机内存也很小,各种硬件配置很低;

       处于这种状态下,少数用户尝试使用手机上网,而且手机上网服务资费相对较高,多数手机上网的用户通过手机内置的浏览器来浏览为数不多的为手机而优化的页面。很少人会去关心用户体验,是否能够获取内容成为这时人们主要想解决的问题。

      后来,聪明的人类为降低手机上网流量造成的资费和网络问题想出了更好的方法来实现移动终端从网络上获取信息,接着本地化应用(Native App)应运而生。通过本地构建好客户端,网络上构建服务端,实现已经构架好的本地化应用实现网络信息的获取。手机QQ也是在这个时候应运而生,早期的第三方手机浏览器也差不多在这个时候进入大家的视野,这些Native App的出现主要是为了解决手机上网的流量和网络问题。但是一些移动终端上的用户体验开始出现,很多手机浏览器上的交互已经做得不错了。现在在倒回去看最早版的移动QQ,很多感慨。想想当时的手机就十几M的内存,100来M的CPU,想实现多好的交互和良好的用户体验实在很难。

      再后来,手机硬件的发展也迅速起来,手机处理器性能大大提升,一般为200MHZ~400MHZ的处理器,内存几十M到一百来M不等。这只是令人振奋的一部分,另一部分就是移动终端系统的发展,这使得更多的交互得以实现,更好的用户体验可以通过各种系统的交互机制来实现。软件和硬件的发展让更多效果得以现实,但是不给力的移动终端网速始终制约着移动互联网的发展。本地化应用(Native App)还是在应用中还是非常有现实意义的,比如说移动终端连接网络速度慢,只能通过架构好的框架来获取所需内容,以最小的网络流量实现最大化的用户体验。但是本地化应用(Native App)存在的最大的问题就是跨平台造成的巨大费用。

二、模型假设(二)

  • 通讯技术进一步发展,平均用户网速上升到100KB/S~300KB/S;
  • 移动终端上网通讯资费较高,普通用户不能完全接受,但是已经有很大一部分人在尝试使用;
  • 移动终端上的处理器的工作频率越来越高,可用内存越来越大;

       处于这种状态下,用户希望在获得更多的内容的同时获取更好的体验,而本地化应用(Native App)的生产商则希望通过一定的方法来实现既跨平台,又让开发费用大大降低,所以这时候该是混合型应用(Hybrid App)上场的时候了。混合型应用是我直接译过来的,它表面上看上去像是一个Native app,真正核心是一个WEB App,只是外面加了一个UI WebView的框架或者说壳。这样的应用比较容易实现开发和跨平台,现在也有很多产品可以支持Hybrid App的开发,比如jQuery mobile、Sencha Touch等。对用户来说差别不大,但是对开发者来说,这其中的差异却不容忽视,因为这意味着他们无需针对各个手机操作系统重新编写应用,而是可以选择用HTML、CSS和JavaScript编写其中一部分代码,并在多个平台上运行应用程序。开发者在不牺牲用户体验的同时,降低了开发成本,使得混合型应用(Hybrid App)更容易被开发者和用户接受。

三、模型假设(三)


  • 通讯技术发展较高水平,平均用户网速达到1M/S以上;
  • 移动终端上网通讯资费水平普通用户可以接受;
  • 手机处理能力足以处理大多日常需要的操作;

      直到这里,我想让大家在回到前面所说的谷歌押宝Chrome OS这件事情,想想“云”时代的来临是否能不拉上移动互联网,想想前一阵子乔布斯在发布会上介绍的IOS5里面的iCloud,想想“云”时代来临的时候移动互联网是什么样子的。基于WEB的WEB App在模型假设的第二阶段已经出现,但是当时为什么没有实现推广和普及呢?我们通过最后一个假设来揭晓答案。

四、模型假设(四)

  • 无线网络畅通阻碍 ;
  • 资费非常低;
  • 技术无障碍;

      想对其他假设最后一个最极端,也更容易说明WEB App如何更能适应将来的发展。想想!!!你所需要的所有文件都在“云”上,你所需要的服务也在“云”上,你所需要工作环境也在“云”上,一切都在“云端”,你只需要打开你的手机(随身携带的浏览器)连接网络,在畅通无阻的无线网络上自由索取你需要的,如服务、图片、音乐、影片,也可以做你想做的,比如工作、社交、游戏等等。你不必担心资费问题,因为资费完全在你的承受范围之内,实现这一切你只需要通过“云”,基于你的手机——你的那个大浏览器,打开各种WEB App,开发者只需要更新自己的WEB App就可以实现跨平台,就是这么简单。从开发者的角度来看,最低的开发成本,最低的维护成本,最大的边际效益。从用户来说,一切只需要从“云”开始,WEB App只和开发者有关系。

五、总结

      我知道一定不会这么简单,我想我的假设会在一定层面和一定程度上变成现实,只是我不知道那个具体的“点”在哪里,也许是在4G时代或者5G时代,网速和资费是我这个假设的两个根本。也许我应该再分细一些的,希望大家能看的懂。

源地址:http://www.mobile20.com.cn/app-evolution/

posted on 所有文章 – UCD大社区: http://ucdchina.com/snap/10242

I liked this: 用In.js颗粒化管理、加载你的Javascript模块

25 7月

近一年来,国内外都十分热衷于异步加载的研究,为了加快页面的载入速度,无阻塞加载Javascript的方法和框架成为了前端开发的焦点和亮点之一。

In.js Logo

国外的像基于jQuery的RequireJs,YUI Loader,LabJs,RunJs,国内也有淘宝的SeaJs,豆瓣的DoJs等,这些都是一些十分优秀的模块加载器。但是本文将会向大家介绍一个新的开源的轻量级“多线程”异步模块加载器In.js,In的开发借鉴了Do的一些思路和使用习惯,在此期间感谢@kejun同我的耐心交流,In.js压缩后只有4.77k,不仅小巧而且十分好用。

优点:

  • 按需加载
  • 无阻塞加载
  • 依赖关系管理
  • 颗粒化模块管理

如何使用?

A.引入In.js

1
<script type="text/javascript" src="in.js" autoload="true" core="jquery.min.js"></script>

只需要在页面顶部引入in.js即可,这里有两个参数需要注意:

autoload: 是否在加载in.js的时候加载底层核心库 – {可选参数 – true|false}
core: 底层核心库的路径 – {可选参数 – url}

如果同时设置了core,并且autoload=true,则在引入In.js的同时加载core到页面中。

B.声明各个模块的地址和依赖关系In.add(name,{config})

1
2
3
In.add('mod-a',{path:'mods/a.js',type:'js',charset:'utf-8'});
In.add('mod-b',{path:'mods/b.js',type:'js',charset:'utf-8',rely:['mod-b-css']});
In.add('mod-b-css',{path:'mods/b.css',type:'css',charset:'utf-8',rely:['mod-a']});

上述代码声明了三个模块的依赖关系和模块的地址,并将它们加入到队列中去(仅仅是加入队列,并没有加载到页面中去)。

C.加载队列In(queue)

1
2
3
4
5
6
var demo=In('mod-b',function() {
	//do something
},function() {
	//do something
	return false;
});

加载mod-b模块,加载完后执行functionA和functionB,在此假设引入in.js时设置了autoload=true,那么队列中的加载顺序依次为:

1
jquery.min.js >>> mod-a >>> mod-b-css >>> mod-b >>> functionA() >>> functionB()

队列全部加载完成后,demo会被赋值为一个数组,其中存放的是每个function的返回值:

1
demo={returns:[undefined,false],complete:true}

D.在domReady之后加载队列In.ready(queue)

1
2
3
In.ready('mod-b',function() {
	//do something
});

队列加载顺序:

1
jquery.min.js >>> {domReady} >>> mod-a >>> mod-b-css >>> mod-b >>> function()

In.ready()和In()的区别在于两点:

  1. In.ready()中的队列只有在domReady之后才会执行
  2. In.ready()没有返回值

E.监听变量变化,值改变则执行回调In.watch(object,property,function(prop,old,new) {})

由于In加载的队列均为异步非阻塞式加载,所以有时候为了特殊需求(比如后续的操作依赖队列中function的返回值),我们需要在确保队列执行完成后,再执行后续操作。这种情况下,可以用In.watch()监听return.complete变量,当return.complete==true的时候执行回调函数,代码如下:

1
2
3
4
5
6
7
8
9
10
var model=In('model',function() {
	//do something
	return 123;
});
In.watch(model,'complete',function(prop,old,new) {
	if(model[prop]==true) {
		console.log(model.returns[0]);//print 123
		In.unwatch(model,prop);//destroy the watch event of model.complete
	}
});

————————-华丽的分割线————————-

In的魅力远远不止上述这些,它的可靠性也已经在几个大项目中得到了印证,除此之外,In也有智能的提示,比如如果用In()加载一个事先未声明的模块,就会提示你检查模块名。真心的希望有更多的前端朋友关注In,使用In,甚至投入到In的后续开发中来。

下图是In.js的英文版使用图册

In.js Manual

在哪下载?

In.js是一个开源的项目,你可以在下边的地址找到它的源代码或者下载它使用。

http://project.benben.cc/In
http://github.com/PaulGuo/In

关于作者

Author: Guokai (腾讯微博 / Twitter / Google+ / Blog
Email/Gtalk: badkaikai@gmail.com


posted on 前端观察: http://www.qianduan.net/particles-with-in-js-management-load-your-javascript-module.html

I liked this: 关于怎么在10万个手机号码中选择重复号码的问题。

22 7月

         刚才看到这篇博客。大家一般都认为用Hash的办法。不过其实还有更高效的算法。

计算机图形学中,有个八叉树量化法,是用来从24颜色中查找重复颜色,并且进行计数归并的算法。它的算法思想是八叉树一共8层,每层都有8个节点,每一条路径从根到页正好对应8个位.

而颜色RGB  三个数字正好可以拼成一个由0-7数字组成的8位数字,于是正好可以用八叉树算法进行插入。

       比如:

 

八叉树比较复杂,不过对于我们的这个需求来说,其实比较简单。

我们这个算法是10叉树,每层都保存了0-9   10个数字。层数就是手机号码的长度。

手机号的第一位就是第一层,只需遍历到最后一层即可判断是否重复。

 

 

于是让我们来实现这个十叉树。效率都和回复中的Linq做比较。

 

View Code

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Text;
  5 
  6 namespace ConsoleApplication1
  7 {
  8     class Program
  9     {
 10         static void Main(string[] args)
 11         {
 12             //示例数组,存放手机号
 13             string[] mobileArray = new string[100000];// { “13900001234”, “13900001235”, “13900001236”, “13900001237”, “13900001234” };
 14 
 15             for (int i = 0; i < 100000; i++)
 16             {
 17                 mobileArray[i] = 1390000
 18                     + (i.ToString().Length > 4 ? i.ToString().Substring(04) : (i.ToString() + 0000).Substring(04));
 19             }
 20 
 21             ////linq语句来实现【select mobile from tmpTable group by mobile having count(*)>1】的效果
 22             var selMobile = from n in mobileArray group n by n into g where g.Count() > 1 select g.Distinct();// select g;
 23 
 24 
 25 
 26             System.Diagnostics.Stopwatch sw = new System.Diagnostics.Stopwatch();
 27             sw.Reset();
 28             sw.Start();
 29             int count1 = 0;
 30             //通过两层循环输出重复的手机号
 31             foreach (var mobile in selMobile)
 32             {
 33                 foreach (string multiMobile in mobile)
 34                 {
 35                     count1++;
 36                     //Console.WriteLine(multiMobile);
 37                 }
 38             }
 39 
 40             sw.Stop();
 41 
 42             Console.WriteLine(Linq共有重复号 + count1+耗时+ sw.ElapsedTicks );
 43 
 44             TenNodeTree tree = new TenNodeTree();
 45             TenNodeTree tree2 = new TenNodeTree();
 46 
 47             sw.Reset();
 48             sw.Start();
 49             int count2 = 0;
 50             //mobileArray = new string[] { “13900001234”, “13900001235”, “13900001236”, “13900001237”, “13900001234”, “13900001236” };
 51             foreach (var item in mobileArray)
 52             {
 53                 if (!tree.Add(item))
 54                 {
 55                     if (tree2.Add(item))
 56                     {
 57                         count2++;
 58                     }
 59                 }
 60 
 61             }
 62 
 63             sw.Stop();
 64 
 65             Console.WriteLine(十叉树共有重复号 + count1 + 耗时 + sw.ElapsedTicks);
 66             Console.ReadLine();
 67 
 68         }
 69 
 70         class TenNodeTree
 71         {
 72             public TenNode Root = new TenNode();
 73 
 74             public bool Add(string no)
 75             {
 76                 TenNode cnode = Root;
 77                 bool isadd = false ;
 78                 for (int i = 0; i < no.Length ; i++)
 79                 {
 80                     char k = no[i];
 81 
 82                     if (cnode.Child[k] == null)
 83                     {
 84                         isadd = true;
 85                         cnode.Child[k] = new TenNode();
 86                     }
 87                     cnode = cnode.Child[k];
 88                 }
 89 
 90                 return isadd;
 91 
 92             }
 93 
 94         }
 95 
 96         class TenNode
 97         {
 98             public TenNode[] Child = new TenNode[256];
 99         }
100 
101 
102     }
103 }

 

 

不过,运行一下,你会发现效率完全不是 Linq的对手:

Linq共有重复号9000耗时143185
十叉树共有重复号9000耗时411221

 

但是,你可不要以为这个算法有问题,要知道Linq是经过高度优化的,我们的算法的实现还有优化空间。让我们来优化它!

怎么优化?指针!有了指针,C#的性能可以提高N倍,见指针版代码:

 

View Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace ConsoleApplication1
{
    
unsafe class Program
    {
        
static void Main(string[] args)
        {
            
//示例数组,存放手机号
            string[] mobileArray = new string[100000];// { “13900001234”, “13900001235”, “13900001236”, “13900001237”, “13900001234” };

            
for (int i = 0; i < 100000; i++)
            {
                mobileArray[i] 
= 1390000
                    
+ (i.ToString().Length > 4 ? i.ToString().Substring(04) : (i.ToString() + 0000).Substring(04));
            }

            ////linq语句来实现【select mobile from tmpTable group by mobile having count(*)>1】的效果
            var selMobile = from n in mobileArray group n by n into g where g.Count() > 1 select g.Distinct();// select g;

            System.Diagnostics.Stopwatch sw = new System.Diagnostics.Stopwatch();
            sw.Reset();
            sw.Start();
            
int count1 = 0;
            
//通过两层循环输出重复的手机号
            foreach (var mobile in selMobile)
            {
                
foreach (string multiMobile in mobile)
                {
                    count1
++;
                    
//Console.WriteLine(multiMobile);
                }
            }

            sw.Stop();

            Console.WriteLine(Linq共有重复号 + count1+耗时+ sw.ElapsedTicks );

            TenNodeTree tree = new TenNodeTree();
            TenNodeTree tree2 
= new TenNodeTree();

            sw.Reset();
            sw.Start();
            int count2 = 0;
            
//mobileArray = new string[] { “13900001234”, “13900001235”, “13900001236”, “13900001237”, “13900001234”, “13900001236” };

            
foreach (var item in mobileArray)
            {
                
fixed (char* no = item)
                { 
                    
if (!tree.Add(no , 11 ))
                    {
                        
if (tree2.Add(no,11))
                        {
                            count2
++;
                        }
                    }
                }

            }

            sw.Stop();

            Console.WriteLine(十叉树共有重复号 + count1 + 耗时 + sw.ElapsedTicks);
            Console.ReadLine();

        }

        class TenNodeTree
        {
            
public TenNode Root = new TenNode();

            public bool Add(char* no,int len)
            {
                TenNode cnode 
= Root;
                
bool isadd = false ;

                for (int i = 0; i < len; i++)
                {
                    
char k = *no;

                    if (cnode.Child[k48== null)
                    {
                        isadd 
= true;
                        cnode.Child[k
48= new TenNode();
                    }
                    cnode 
= cnode.Child[k48];

                    no++;

                }

                return isadd;

            }

        }

        class TenNode
        {
            
public TenNode[] Child = new TenNode[10];
        }

    }
}

 

Linq共有重复号9000耗时139310
十叉树共有重复号9000耗时69545

 如何?效率已达到Linq的1倍!

这还不算完,我们还没有使用Release模式呢!

 

Linq共有重复号9000耗时141970
十叉树共有重复号9000耗时35843

 Release后,性能又提升1倍!

 

大家不妨用其他语言来实现下,比比效率如何?

C#还是很强的,HOHO

 

 

 ==================================

今天又做了测试,发现我家的老笔记本上,是十叉树占优,但是公司的电脑上是HashSet比较快。

不过十叉树应该还没有达到最优化,应该是分配节点时的开销过大导致。暂时想不出更好的优化方法-_-

 ==================================

五分钟后再次测试,十叉树只需在初始化时预先分配一个节点池,即可完胜HashSet.不过,此法或有胜之不武的嫌疑,哈哈。

也就是说,不算实例化的时间,十叉树胜,算实例化时间,哈希胜,

 

 

 

 

 

作者: 烙馅饼喽 发表于 2011-07-21 18:40 原文链接

评论: 16 查看评论 发表评论


最新新闻:
· Google+访问量达180万 上周猛增2.8倍(2011-07-22 10:51)
· 薛蛮子投资Madeinchina.com 涉足外贸电商(2011-07-22 10:50)
· 甲骨文收购Ksplice(2011-07-22 10:48)
· Logo设计师可能会犯的22个错误(2011-07-22 10:40)
· 消息称IBM已任命凯文·里尔登为公司并购主管(2011-07-22 10:36)

编辑推荐:Scala 登陆 .NET 平台

网站导航:博客园首页  我的园子  新闻  闪存  小组  博问  知识库

posted on 博客园-首页原创精华区: http://www.cnblogs.com/ashei/archive/2011/07/21/2113162.html

I liked this: 2011 移动平台开发现状

22 7月

VisionMobile_DeveloperEconomicsInfographic2011_1000

Visionmobile 根据“2011 开发者经济调查报告”(点击这里下载该报告)中的数据制作了一幅信息图,使我们可以一览手机各平台的开发现状。这幅信息图关注的的手机平台有 Android,黑莓,iOS(iPhone),Java ME,Mobile web,Symbian,Windows Phone。

平台使用的比例

  • 67% 的开发者使用 Android 平台,比 2010 年上涨 8%
  • 59% 的开发者使用 iOS(iPhone)平台,比 2010 年上涨 9%。
  • 56% 的开发者使用 Mobile Web,比 2010 年上涨 16%
  • 46% 的开发者使用 Java ME,比 2010 年下降 4%。
  • 45% 的开发者使用黑莓平台,比 2010 年上涨 5%。
  • 38% 的开发者使用 Symbian,比 2010 年下降 8%
  • 36% 的开发者使用 Windows Phone,比 2010 年下降 3%。

需要注意的是

  • Mobile Web 的使用有了令人惊讶的转变,在开发者的意愿中已经占据了第三位。可见,跨平台的需求正在快速增长,一个值得关注的趋势。
  • 黑莓平台的开发者仍然很多,并且仍在增长,这与黑莓在美国失势的趋势形成鲜明对照,其中原因令人困惑。
  • Symbian 平台开发者减少并不令人奇怪,相信仍会继续下降。
  • 使用 Java ME 的开发者虽然有所下降,但人数仍然很多。
  • 采用应用商店模式的平台有 Android,黑莓,iOS,Java ME。奇怪的是,这张图上的 Windows Phone 并未采用应用商店模式,应该不是指 Windows Phone7 平台。

平台分裂

与日常经验相反,Android 的分裂并没有想象的那么大,平台分裂程度最厉害的是黑莓和 Java ME 平台。

主要发行渠道

由于 iOS 应用商店的强大,以应用商店为主要发行渠道的开发者所占比例最高。

收入情况

收入最高的平台是 iOS 和 Java ME 平台。如果每个应用的收入以 Symbian 为参照点(1 点),iOS 的收入是 3.3 点,Java ME 是 3.7 点。

Java ME 平台的收入水平超过了 iOS 平台,相信这会使好多人感到意外。黑莓的收入水平是 2.4 点。Android 平台的收入水平很低,仅高于 Mobile Web 的收入潜力。

收入模式

无论何种平台,近一半开发者的收入来自公司,包括薪水和佣金。

开发者采取直接收取费用模式的平台中,Java ME 再次居于首位,92% 的开发者采用这种收入模式,其次是 iOS 平台,高达 84%。黑莓平台的比例最低,只有 58% 的开发者采用直接收费的模式,这说明黑莓平台的个人开发者比例是最低的。

具体情况参看下面这幅信息图(点击放大)

VisionMobile_DeveloperEconomicsInfographic2011_1000

via Visionmobile

Google+ has a Garden of Eden feel about it, especially compared with the overdeveloped, uncontrolled sprawl of Facebook.(by Harry McCracken )

© 积木 for 爱范儿 · Beats of Bits |
原文链接 ·
16 热评 ·
新浪微博 ·
订阅全文 ·
Google+ ·
#ifanrlive

需要 Google+ 邀请?请[ 点击申请
] 并填写您的邮件地址,enjoy~
posted on 爱范儿 · Beats of Bits: http://www.ifanr.com/46788

I liked this: 终于发现了可以下载iphone4高清视频的地方了!

22 7月

地址:http://www.veryhd.cc/forum-112-1.html

已经测试能完美在ip4上播放。貌似ip4的资源不多,但都是高清的。

里面还有个魅族M8区,里面有很多资源,经测试 能在ip4上播放,而且很多都是男童鞋喜欢看的视频。
posted on 威锋网: http://bbs.weiphone.com/read-htm-tid-2572533.html

I liked this: 关于修改Hosts上Facebook、Youtube的原理、注意事项、故障办法的介绍

21 7月

昨天小弟无意发了个不是用工具上国外几个网站的方法,没想到大家关注度很高,原贴在这:http://bbs.weiphone.com/read-htm-tid-2555872.html
但是在使用过程中发现很多人有各种问题出现,甚至影响了手机的正常使用,在此先给大家句抱 ..
posted on 威锋网: http://bbs.weiphone.com/read-htm-tid-2561860.html

I liked this: Google字体API使用简单示例

21 7月

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=1803

一、前面的话

Google总会做些造福大众的事情,例如提供了web在线字体的API,这玩意其实去年就有了,但是字体种类手指头+脚趾头就可以数出来。but 最近,貌似Google对字体API进行了升级,可使用的在线web字体已经奔向200去了。
可提供的在线字体个数 张鑫旭-鑫空间-鑫生活

对于设计者而言,可谓不得不高兴的事情。这里,通过简单的例子,讲讲如何使用这些字体API。

二、寻找这些字体

首先,进入这个页面:http://www.google.com/webfonts/v2,如果你是首次进入,您会看到类型下图效果的页面:

字体API起始页面截图 张鑫旭-鑫空间-鑫生活

如果您使用的是具有考古价值的IE浏览器,抱歉,你看到的会是下面模样的页面,
字体API浏览器不支持提示页面 张鑫旭-鑫空间-鑫生活

如果你使用靠谱的浏览器,则选择进入后会看到下面这样子的界面,其功能如下图标注:
页面功能区域标注 张鑫旭-鑫空间-鑫生活

三、给web页面添加单个字体

如果你只想给页面添加一个字体,其实可以告别上面一堆按钮啊什么的,直接参照下面的方法使用就可以了。

例如,你想要添加一个名叫'Yanone Kaffeesatz'的字体,直接在页面的头部加入这么一行代码就可以了:

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

然后响应的CSS代码如下:

body{font-family:'Yanone Kaffeesatz';}

然后页面的英文字体就长得奇形怪状了,如下图所示:
英文字体的显示 张鑫旭-鑫空间-鑫生活

很简单的。

细心而聪明的你可能已经看出的字体使用的规则:首先头部调用Google的字体API CSS文件,统一的,?family=后面跟着的就是你希望添加的字体名称(中间的空格以+号代替),然后,就可以从容地使用该字体了,包括CSS3的文字投影效果。
文字投影效果 张鑫旭-鑫空间-鑫生活

所以,如果你对Google 字体API页面上哪个字体感兴趣的话,例如这里的'Give You Glory'字体。
字体截图 张鑫旭-鑫空间-鑫生活

直接如下代码就OK的啦:

<link href="http://fonts.googleapis.com/css?family=Give+You+Glory" rel="stylesheet" type="text/css" />
body{font-family:'Give You Glory';}

对于单个字体,我做了个demo页面,您可以狠狠地点击这里:Google字体API使用demo 1

在现代浏览器下(IE浏览器因为某些原因会崩掉),切换下拉框的字体,会看到页面字体跟着变化。
切换字体查看 张鑫旭-鑫空间-鑫生活

四、给web页面添加多个字体

如果你的页面需要引用多个字体,则显然使用自动生成的方法更简单些,举个例子,如下操作:
①选择你想要添加的字体:
选择你要添加的字体 张鑫旭-鑫空间-鑫生活

②点击页面下部搜藏条上的use按钮
点击use按钮

③第一屏是效果,滚动滚动条,你就可以看到外链的API代码了:
API调用代码呈现 张鑫旭-鑫空间-鑫生活

然后,把上面框框中的代码拷贝到页面头部,你就可以使用你所收藏的N个字体了哈。也算相当简单的啦。效果啊什么的,这里就不展示了,因为今天我生日,晚上有约会,没事情耗了,不好意思啦。

五、最后的话

目前只支持英文的些字体,至于中文,我个人觉得蛮悬。主要原因之一就是大小的问题,英文只需要兼顾26个英文字母,数字和一些字符就可以了,但是汉字却有千千万万(表示多),动不动一个字体就几兆,这页面光加载一个字体就好去十几秒(目前速度),实在不能放在商业站点上。目前靠谱的做法就是只放置部分字体,如网站logo上面的文字之类,这样,字体大小小了,自然也就让其在web上大规模应用成为了可能,只是,不知有没有这一天。

恩,就这些。希望本文的唠叨能够对您的学习有所帮助,欢迎帮忙纠正文中表述不准确的地方。
感谢阅读!

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1803

(本篇完)

有话要说,点击这里发表评论。

posted on 张鑫旭-鑫空间-鑫生活: http://www.zhangxinxu.com/wordpress/2011/07/google%e5%ad%97%e4%bd%93api%e4%bd%bf%e7%94%a8%e7%ae%80%e5%8d%95%e7%a4%ba%e4%be%8b/