网络上有一些解决方法，但都是针对本地客户端的修改，毕竟我们不能让每个用户去修改他的浏览器设置，所以还是希望通过css方法解决，通过不断尝试找到了一个偏方：

通过自制字体来解决12px限制。

方法的灵感来源于一次字体对比，当我在页面中载入Verdana和Georgia时，发现同样是12px，但在显示上Georgia比Verdana小，于是就想到如果能找到一种字体，它的12px比其它正常字体的12px要小许多，这样就算chrome有12px限制，那么这个字体因为自身12px小的缘故所以显示上就会明显小于其它字体的12px，也就间接的达到缩小字体的目的。但尝试了很多字体都没有找到合适的，所以最后决定自己修改一套字体。

这里用的是系统自带的arial，通过FontLab来修改，我只保留了A-Z、a-z、0-9以及一些运算符号，然后将它们的大小缩至原来的70%(反复测试结果，70%字体看上去比较正常=.=)





保存，重命名为arialg…

通过@font-face外链自定义字体

有了合适的字体，剩下的就是用@font-face加载它，修改后的arialg大小只有35kb，应该不会对页面载入造成负担。最后还可以通过webkit的hack来防止其他浏览器加载这个字体。

看看chrome中的效果:

Demo:

当然这个方法也有明显的弊端：
1.对字体的要求比较高，想找到合适的字体不容易，自制的话成本又较高，而且很难保证美观。
2.会影响到同样是webkit内核的safari浏览器。
3.只适用于英文字体。

折腾出的这个方法也只能算是勉强能用，虽然涉及到字体制作，但主要原理还是利用CSS，而且不牵扯到用户设置，所以姑且算是一种CSS方法吧，呵呵。当然最终还是希望google能把这个蹩脚的限制去掉,能让我们有更多发挥的空间。

FontLab
windows版本(可以去网上找下绿色版)
mac版本(带key)

1.配置PHP环境

这里用于配置PHP环境的软件仍然是XAMPP,首先下载XAMPP Mac OS X 1.7.3;然后安装到/Applications目录下;运行XAMPP,开启apache和mysql;最后在浏览器中输入http://localhost.如果出现下图所示的欢迎页面就说明成功了!

2.安装WordPress

新建数据库,在欢迎页面中点击”phpMyAdmin”进入数据库后台,具体的设置可以看看”在本地安装 wordpress“.

下载最新的WordPress3.0,然后将解压的文件放到”站点”文件夹下,最后在浏览器中输入http://localhost/~用户名/文件夹名 进行自动安装.

至此”又一个WordPress博客”就完成了.

如果只是安装一个WordPress那么现在就可以收工了,但我想把blog的数据也同步,于是折腾才刚刚开始…

说到WordPress同步数据,最先想到的自然是最常用的导入,导出工具,但这次它却很不给面子,导入过程中提示”已上传的文件无法被移动到…“检查XML的文件名和相关文件夹的权限都没发现问题,不想纠结,放弃…改用phpmyadmin导入数据.

进入phpmyadmin选择相应的数据库,点击导入数据,选择上传备份的sql文件

但这里却提示”#1062 – Duplicate entry ’1′ for key 1错误…“,没退路了…google一下,发现是主键重复造成的错误,可能是刚刚导入XML所致,于是清空所有表,再导入一次,成功!

原以为这就搞定了,但进入blog才发现由于导入的是线上的数据所以链接全是http://iinterest.net…再次进入数据库,打开”wp_options“表,将”siteurl“”home“的值改为”http://localhost/~用户名/文件夹名“,到这里才算全部搞定,历经2个小时…

一、少用图片

一开始，为了做出用来表示各个城市的每一天的那种渐变效果，我们用了一套相当复杂的 -webkit-gradient，结果发现这会令转译速度变得非常非常慢。-webkit-gradient 的工作方法是构建位图，对于浏览器的转译引擎来说，这和从外部加载图片（例如一张 PNG）是完全一样的。MobileSafari 显示图片速度之慢是出了名的（希望 4.0 对此有所改进），要解决这个问题，基本上只能不用图片和 -webkit-gradient。

我们最终把那些色彩条快用背景上的一个很大的 canvas 元素替代了。当你拖动游标线时，那些条块的颜色会发生变化，只有正在变化的部分才会被重新绘制。用 canvas 时可以在某种程度上复用 -webkit-gradient，比如这样：

// WebKit CSS gradient

-webkit-gradient(linear, left top, right top,

from(#4b4c4d),

color-stop(0.249, #4b4c4d),

color-stop(0.25, #575b5c),

color-stop(0.329, #575b5c),

color-stop(0.33, #6b7071),

color-stop(0.749, #6b7071),

color-stop(0.75, #575b5c),

color-stop(0.909, #575b5c),

color-stop(0.91, #4b4c4d),

to(#4b4c4d)

);

// canvas gradient

var gradient = $(‘canvas’).getContext(“2d”).createLinearGradient(0,0,230,0);

gradient.addColorStop(0,’#4b4c4d’);

gradient.addColorStop(0.249,’#4b4c4d’);

gradient.addColorStop(0.25,’#575b5c’);

gradient.addColorStop(0.329,’#575b5c’);

gradient.addColorStop(0.33,’#6b7071′);

gradient.addColorStop(0.749,’#6b7071′);

gradient.addColorStop(0.75,’#575b5c’);

gradient.addColorStop(0.909,’#575b5c’);

gradient.addColorStop(0.91,’#4b4c4d’);

gradient.addColorStop(1,’#4b4c4d’);

二、不要用 text-shadow 和 box-shadow

这是速度变慢的另外一个重要因素。最好不要用这些 CSS 属性。

三、硬件加速是很新的功能……而且也很多BUG

在 Safari 上，只要使用 -webkit-transform 这个 CSS 属性就可以启用硬件加速了。（opacity 也行，不过缺点上面说过了。）

硬件加速有其局限，例如同时运行的动画数量是有限制的，如果超过了这个限制，动画就会闪烁，有时还会出错。不过如果轻度使用的话，效果会非常棒。

四、尽可能地使用触控事件

触控事件是个好选择，因为传统的 onClick 事件在 iPad 上用来会有点延迟。在 everytimezone.com 的源代码里有些小窍门，教你如何在使用触控事件的同时，也能够支持非触控设备上的浏览器：

var supportsTouch = ‘createTouch’ in document;
element[supportsTouch ? 'ontouchmove' : 'onmousemove'] = function(event){
var pageX = event.pageX;
if (event.touches) pageX = event.touches[0].pageX;
// …
}

五、不要用 opacity

因为某些原因，使用 opacity 这个 CSS 属性有时会干扰硬件加速。如果你感到速度变慢，但又看不出哪里出了问题的话，就检查一下有没有用到 opacity 吧。

六、万事无捷径，请手写 JavaScript 和 CSS

不要依赖框架或是网页标准狂热分子推荐给你的东西。我们这个例子里只有一个高度精简的 HTML 页面，CSS 都写在页面里，没用任何 JavaScript 框架，并尽量利用了目标平台（iPad）的特性，最终的结果就是一个几乎能够瞬间加载的苗条网页，而且缓存做得很好，离线使用也毫不失礼。没错，我们也可以选择用 JavaScript 和 CSS 框架，但有的时候少即多。（记住，各类框架所提供的那些对跨浏览器的支持你并非全都需要。）

// mini-pico-tiny convenience micro-framework, ymmv
function $(id){ return document.getElementById(id); }
function html(id, html){ $(id).innerHTML = html; }
function css(id, style){ $(id).style.cssText += ‘;’+style; }
function anim(id, transform, opacity, dur){
css(id, ‘-webkit-transition:-webkit-transform’+',opacity ‘+(dur||0.5)+’s,’+(dur||0.5)+’s;-webkit-transform:’+transform+’;opacity:’+(1||opacity));
}

七、别用 translate，用 translate3d

使用 -webkit-transform 时，记得用 translate3d(x,y,z) 语法，而不是 translate(x,y)。因为某种原因，后者无法支持硬件加速，至少在 iOS 3.x 上不行（不过在桌面版 Safari 里似乎没问题）。谢谢马提奥·斯宾内利指出这点。（也推荐大家看看他做的 iScroll，里面有很多很棒的代码，也是演示如何为页面在移动版 WebKit 上的速度进行优化的好例子。）

转自apple4.us

分享一个jquery的图片放大预览插件:cloud-zoom.

cloud-zoom DEMO

部署步骤:

1.加载jquery-1.4.js 和 cloud-zoom.1.0.2.min.js

2.加入样式表(DEMO中<style>部分)

3.为需要放大预览效果的缩略图添加超链接<a>并将类命名为”cloud-zoom” class=”cloud-zoom”

4.在超链接<a>的rel属性中加入需要的参数实现不同的效果

实例:

<a href=”images/大图.jpg” class=”cloud-zoom” rel=”position:’inside’ ,showTitle:false, adjustX:-2, adjustY:-2″><img src=”images/缩略图.jpg” title=”iinterest” /></a>

cloud-zoom参数说明:

先来看看一个HTML5的布局,由于IE无法识别新的语义化标签,所以样式表并没有起作用.

解决的方法就是用js来创建HTML5中新增的标签,因为此代码只提供给IE,所以加上条件注释:

<!–[if IE]>

<script>

(function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header, hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(‘,’),i=e.length;while(i–){document.createElement(e[i])}})()

</script>

<![endif]–>

这时可以看到例子中的样式表生效了,但布局效果却并不是预想的那样(可以对比支持HTML5的浏览器),原因就在于js所创建的元素默认都为行内元素…

所以最后还要为那些结构性的块级标签加上一个样式:

article, aside, dialog, footer, header, section, footer, nav, figure {
display: block;
}

至此IE就可以正常的显示所定义的标签了,但也仅仅是正常显示,类似audio,canvas这些多媒体以及交互式标签的功能是无法实现的.