<![CDATA[PuterJam's Blog - Web Design]]> http://www.vzsio.live/ zh-cn PBlog2 v2.4 PuterJam's Blog http://www.vzsio.live/images/logos.gif http://www.vzsio.live/ PuterJam's Blog http://www.vzsio.live/article/Web/mac_os_fonts.htm <![CDATA[关于MacOS下字体的一些研究]]> puterjam@gmail.com(puterjam) Sun,18 Dec 2011 18:16:38 +0800 http://www.vzsio.live/default.asp?id=1039

Mac 下的中文字体不多,系统默认是使用细黑体来显示中文文字(STXihei)。

为什么苹果不使用宋体来显示呢,因为宋体是衬线字体。

NewImage
衬线字体:带字体修饰的字体。(图中红色部分) 也叫“白体”,相对的非衬线字体叫“黑体”,英文叫sans-serif(sans在英文是非的意思)
NewImage
(中文的宋体和黑体)
在传统的印刷中,衬线字体一般都是用来正文印刷,但是在CRT LCD显示器上这些字体不适?#26174;?#35835;,同时字体过小的衬线字体不如非衬线字体美观。后来微软在vista中推出?#23435;?#36719;雅黑这个非衬线字体。同时为了优化非衬线字体,采用了字体抗锯齿技术(clearType)。不过苹果在1998年就开始使用了这个技术。

ClearType 原理
NewImage
 
衬线字体不适?#26174;赾learType下使用,因为过小的字号没有住够像素空间去展示(笔划末端的点缀太多),显示也不美观(比如Flash如果用了宋体在mac下 NewImage就比较悲剧)。
 
除非是点阵显示(winXP的宋体时代),点阵显示在LCD上显示会带来不少问题。
NewImage
(12px ClearType下的宋体)
 
NewImage
(12px ClearType下的STXihei)
 
在Mac系统中,不同语言的默认字体是
  • 日文字体是:Hiragino Kaku Gothic Pro
  • 简体中文是:STXihei
  • 繁体中文是:LiHei Pro Medium
  • 韩文字体是:AppleGothic

 

英文的Mac系统中,对文字的字体查找顺序是:

  • 英文字体->日文字体->中文字体
 
Hiragino 字体比 STXihei 显得比较饱满些,不过Hiragino Kaku Gothic Pro没有包含简体文字,后来也出来?#24605;?#20307;版本的Hiragino字体叫,冬青黑体简体中文(Hiragino Sans GB)
NewImage
 
在 Web 上的字体,如果使用了 Arial,verdana 字体作为默认,中文字体自动是选用非衬线字体STXihei。如果默认字体是 Georgia,Times New Roman,那么中文字体就会自动选成宋体

 

]]>
http://www.vzsio.live/article/Web/IE9_Beta_release.html <![CDATA[IE9 Beta 凌晨发布~]]> puterjam@gmail.com(puterjam) Thu,16 Sep 2010 03:32:03 +0800 http://www.vzsio.live/default.asp?id=1028 微软IE9 Beta今天凌晨 1:30 正式发布。本着好奇的心理,舜子也赶紧开始对IE9进行初体验。

第一眼的变化,?#27604;?#26159;图标的变化了,图标的颜色变得更加轻盈,不知道是不是为了表现出IE9在?#38405;?#21644;速度上做出了很大的改进的暗示?

另外,IE9的界面也变得“Chrome”化起来,不过有点不习惯,IE9的地址栏被缩短得太厉害了。连状态栏都有chrome的味道,不过暗爽的是PJHome的CSS3效果终于能够基本还原出来了。

 

对HTML5的支持,IE9显然还有很长的路要走,才96分,不过也算是个好的开始:P 也给前端开发带来了更多机会(前提还是IE6赶紧灭亡…)

 

异常强大的Zoom, 基本上保持了页面元素的可用和flash的事件,大屏幕和视觉?#20064;?#20154;士的福音

 

同时IE9?#37096;?#22987;自带文件下载管理器了, 用户需求所需哈。

(下载提示)

 

Web APP理念,用户可以直接把web拖放到Win7的任务栏,直?#26377;?#25104;一个web APP. 灰常方便(估计这样win7的任务栏不够用了把)另外Web App可以提供一些按钮控制(Qzone的音乐按钮可以放到任务栏了)

 

另外作为开发,还是最?#34892;?#36259;还是调试器部分,其实这次IE9的调试器给舜子的感觉还算不错,对付大的JS代码可以轻?#29366;?#29702;,压缩后的代码?#31995;?#20063;容易定位。除了增加了抓包工具外没太多变化,命令行依然难用- -. 样式所见即所得依然缓慢

 

初体验现在这里把,后续还需要对IE9进一步了解,也好为后续的web体验改善做好更多的选型和分析。

 

?#27604;?#36825;次的IE9更多的提升是在技术方面,这里还是推荐到官方的test drive站点去亲自体验

http://ie.microsoft.com/testdrive/

 

不同版本IE9 Beta下载:

Windows7

     32位:http://url.cn/3ujlN8

     64位 http://url.cn/3ryZlZ

Vista

     32位:http://url.cn/08Uyxp

     64位 http://url.cn/290duo

 

WinXP

     杯具帝~~~

 

]]>
http://www.vzsio.live/article/Web/Qzone_No_IE6.html <![CDATA[Qzone 即将推用户更新IE6]]> puterjam@gmail.com(puterjam) Wed,23 Jun 2010 15:10:07 +0800 http://www.vzsio.live/default.asp?id=1025  

Qzone 即将推用户更新IE6,积极推动IE6在中国的灭亡。 希望能给更多用户和前端开发出一份勉力。

更多消息可以关注Qzone的微薄 http://t.qq.com/qzone

]]>
http://www.vzsio.live/article/Web/chrome_vs_IE9_PNG.html <![CDATA[深入分析IE9的图片?#38405;?#27979;试?#36947;齗]> puterjam@gmail.com(puterjam) Wed,17 Mar 2010 17:56:42 +0800 http://www.vzsio.live/default.asp?id=1021

 微软发布了IE9的技术预览版,也放出了不少测试的?#36947;?#25972;体来看给大家带来一支镇定剂。不过舜子这里对其中一个演示案例很?#34892;?#36259;。

 

我们先来看看这个?#36947;?a target="_blank" href="http://ie.microsoft.com/testdrive/Performance/01FlyingImages/Default.html">点击打开

 

最让我好奇的是chrome在这个?#36947;?#20013;几乎是所有浏览器中最慢的,令?#33308;?#36300;眼镜。

 

深入分析了这个?#36947;?#30340;实现,里面包含其实两部分功能会影响?#38405;埽?strong>动画的JS算法和图片的渲染

测试单纯的动画的算法,把所有图片都block掉。测试得出的结果是,chrome处理256张图片,平均44FPS。而其他浏览器IE7(应为没装IE9,暂时用IE7测试一下),firefox3.6,opera 10.50平均20~22 左右。这?#24471;鱟hrome在纯算法上都是非常有优势的。

 

这里动画的JS算法并不是最主要的问题了,最大的问题看来是来自对图片的渲染上。仔细看了每一张图片,?#31354;?#22270;片都是以一个540x540包括alpha透明的浏览器logo。 看来chrome在渲染大尺寸PNG的时候吃了很大的亏。期待下一个版本的chrome能修复对PNG处理的问题,毕竟这个也是主流的图片格式。

 

 

(微软故意挑战chrome的PNG图片)

这里舜子还没有针对IE9进行完整的测试。不过在同事的电脑上测试这个?#36947;?#26102;,无疑IE9在渲染上是目前所有浏览器中最快的。而?#19968;?#26377;D2D对图片渲染图片在放大和缩小都有抗锯齿表现。

 

我把这个测试?#36947;齞own了下来,有兴趣的朋友可以自己测试一下

 点击下载此文件

]]>
http://www.vzsio.live/article/Web/how-ie8-determines-document-mode.html <![CDATA[IE8 如何判断文?#30340;?#22411;]]> puterjam@gmail.com(puterjam) Wed,03 Mar 2010 10:29:43 +0800 http://www.vzsio.live/default.asp?id=1020 首先给出一组数据


 
这组数据?#24471;?#20102;目前IE8在渲染模式下的一些比例(微软偷偷统计的?)。

      ● 有19% 的站点用了?#32454;?#22411;的标准来设计(非常好的数据,得?#34892;?#40664;默无闻在前线工作的页面重构同学们)

      ● 有 14% 的站点用了http头和 X-UA-Compatible 把IE打回IE7的模式

      ● 有 41% 的站点用了Doctype让IE8使用标准模式(这里指的是,大家常用的过渡型)

      ● 很不?#19968;?#26377; 26% 的站点使用了Quirks 模式....



下面的图详细得给出了IE8内部对渲染模型的判断流程
 
 
 
更多信息请跳转这里:
http://blogs.msdn.com/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx

 

]]>
http://www.vzsio.live/article/Web/I_Can_t_Believe_It_s_Not_Flash.html <![CDATA[我不相信这不是Flash]]> puterjam@gmail.com(puterjam) Mon,22 Feb 2010 10:33:15 +0800 http://www.vzsio.live/default.asp?id=1019 Ajaxian上看到了一个有意思的ppt,这个ppt给我们介绍了一些web的效果和特性不需要使用flash来实现。

 

]]>
http://www.vzsio.live/article/Web/Mockingbird_visual_mockup_tool.html <![CDATA[Mockingbird 在线的原型设计工具]]> puterjam@gmail.com(puterjam) Sun,08 Nov 2009 00:57:05 +0800 http://www.vzsio.live/default.asp?id=1014 Mockingbird 是基于 Cappuccino 开发的一个在线原型设计工具。

比较?#19981;端?#33258;动对齐的体验:P 不考虑ie的web app 可以让开发者更加大胆了。

No Flash, No IE, All in Canvas, Apple Style

]]>
http://www.vzsio.live/article/Web/css3_reference_manual.html <![CDATA[CSS 3.0 参考手册 (中文版)]]> puterjam@gmail.com(puterjam) Mon,24 Aug 2009 12:11:38 +0800 http://www.vzsio.live/default.asp?id=1011  

公司的页面同学们,利用业余时间整理出了一份比较完整的CSS 3.0 参考手册,非常不容?#20303;?#25163;册是根据W3C的CSS3草案翻译,并且结合实际的示范结合而成。每一页都倾注了每一个同学的心血。

 

预览页面:

下载地址: http://webteam.tencent.com/css3/

 

]]>
http://www.vzsio.live/article/Web/xhtml2_html5.html <![CDATA[漫画:混乱的标记语言XHTML2/HTML5]]> puterjam@gmail.com(puterjam) Fri,31 Jul 2009 01:00:28 +0800 http://www.vzsio.live/default.asp?id=1007 单击图片打开看更好看哟 :P

转自 : http://bit.ly/kL7BC

]]>
http://www.vzsio.live/article/Web/20-tools-to-make-the-life-of-a-web-developer-easie.html <![CDATA[20个让Web Developer开发生涯更加轻松的工具]]> puterjam@gmail.com(puterjam) Thu,11 Jun 2009 10:48:37 +0800 http://www.vzsio.live/default.asp?id=998 源文:  http://net.tutsplus.com/articles/web-roundups/20-tools-to-make-the-life-of-a-web-developer-easier/

简译:  PuterJam

 

Typetester

一个在线对比字体的工具,可以很直观得看到不同字体的差异

 

pForm

创建HTML表单的工具,能在瞬间创建很美观的表单,并输出html代码

 

ColourLovers

在线的调色板工具,你能够搜索到很多配色方案或提交你的配色方案

 

Firebug

无所不能的firebug,不多介绍了

 

HTML Entity Character Lookup

HTML 实体 查询工具

 

960 Grid System

960 是个神奇的数字,960 是横向尺寸,960 网格系统是能够让设计师快速创建网页原型的辅助系统。可以比喻成网页的?#24179;?#20998;割线

pfvyzisv.jpg

 

 

Em Calculator

EM换算器~ ,可以把像素换算成 em 单位。

 

Browser Shots

多浏览器截屏工具,可以提供多个平台,不同浏览器的页面截屏效果

 

Icon Finder

还在为找图标发愁么,一个不错的图片搜索工具。

 

WhatTheFont

当你图片里看到一个好看的文字而不知道字体名称时,可以用它来帮你分析字体类型

 

MeasureIt

firefox插件,可以在页面上显示一个尺子

 

ColorZilla

同样是firefox插件,可以在页面上取色,前端开发必备

 

Pingdom

一个在线的抓包工具

 

Test Everything

Test Everything 提供了很多测试工具来测?#38405;?#30340;站点。从css html 到seo ,从网络工具到优化应有尽?#23567;?/p>

 

CSS Sprite Generator

样式精灵,这类工具很多了,就?#21069;?#22270;片分割并且输出成css

 

Web Developer Toolbar

也是一个非常强大的web开发工具。

 

Domainr

域名查询工具,很方面查询域名的使用情况,并且给出未注册域名的建议。(需要翻墙)

 

Font Burner

字体查询工具,并且提供在线的字体解决方案。仅限英文。

 

Smush.It

图片优化工具,能够优化你的图片尺寸

 

Load Impact

可?#38405;?#25311;不同地区的用户访问你的站点的情况。并且以图表的情况反馈结果。

]]>
重庆时时彩规律大全
重庆时时彩骗局报道 3v重庆时时彩下载 重庆时时彩1-5球 重庆时时彩组六怎么玩能挣钱 重庆时时彩网上平台是假的吗 重庆时时彩app分析软件 新时时彩是怎么开奖的 重庆时时彩预测2 时时彩内部管理计划群 360重庆老时时彩走势图表 时时彩漏洞教程 重庆时时彩开奖的 重庆时时彩平台高返点 重庆时时彩平刷组六 玩重庆时时彩心态
那不勒斯的萤火TXT 布莱顿vs曼联预测 76人吧 神秘圣诞老人电子 0405欧冠利物浦ac米兰 韩国跑跑卡丁车手游版 皇家社会对巴利亚多利德 阿尔艾因塞 欢乐生肖彩票怎么玩