Subscribe: PuterJam's Blog - Web Design
http://www.pjhome.net/feed.asp?cateID=4
Added By: Feedage Forager Feedage Grade B rated
Language: Chinese simplified
Tags:
css  gothic  hiragino  kaku gothic  kaku  ldquo  mockingbird  pro  qzone  rdquo  web developer  web  ● 有    有 ●     
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: PuterJam's Blog - Web Design

PuterJam's Blog - Web Design



关注互联网~ 关注前端技术~ 激情是成功的必要前提~



Copyright: Copyright 2005 PBlog3 v2.8
 



关于MacOS下字体的一些研究

Sun,18 Dec 2011 18:16:38 +0800

 (image)

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

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

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

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

 

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

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

 




IE9 Beta 凌晨发布~

Thu,16 Sep 2010 03:32:03 +0800

微软IE9 Beta今天凌晨 1:30 正式发布。本着好奇的心理,舜子也赶紧开始对IE9进行初体验。

第一眼的变化,当然是图标的变化了,图标的颜色变得更加轻盈,不知道是不是为了表现出IE9在性能和速度上做出了很大的改进的暗示?

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

(image)

 

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

(image)

 

异常强大的Zoom, 基本上保持了页面元素的可用和flash的事件,大屏幕和视觉障碍人士的福音

(image)

 

同时IE9也开始自带文件下载管理器了, 用户需求所需哈。

(image)

(image)

(下载提示)

 

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

(image)

 

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

(image)

 

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

 

当然这次的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

     杯具帝~~~

 




Qzone 即将推用户更新IE6

Wed,23 Jun 2010 15:10:07 +0800

(image)  

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

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




深入分析IE9的图片性能测试实例

Wed,17 Mar 2010 17:56:42 +0800

(image)

 微软发布了IE9的技术预览版,也放出了不少测试的实例,整体来看给大家带来一支镇定剂。不过舜子这里对其中一个演示案例很感兴趣。

 

我们先来看看这个实例:点击打开

 

最让我好奇的是chrome在这个实例中几乎是所有浏览器中最慢的,令人大跌眼镜。

 

深入分析了这个实例的实现,里面包含其实两部分功能会影响性能,动画的JS算法图片的渲染

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

 

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

 

 (image)

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

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

 

我把这个测试实例down了下来,有兴趣的朋友可以自己测试一下

 (image) 点击下载此文件




IE8 如何判断文档模型

Wed,03 Mar 2010 10:29:43 +0800

首先给出一组数据   这组数据说明了目前IE8在渲染模式下的一些比例(微软偷偷统计的?)。       ● 有19% 的站点用了严格型的标准来设计(非常好的数据,得感谢默默无闻在前线工作的页面重构同学们)       ● 有 14% 的站点用了http头和 X-UA-Compatible 把IE打回IE7的模式       ● 有 41% 的站点用了Doctype让IE8使用标准模式(这里指的是,大家常用的过渡型)       ● 很不幸还有 26% 的站点使用了Quirks 模式.... 下面的图详细得给出了IE8内部对渲染模型的判断流程       更多信息请跳转这里: http://blogs.msdn.com/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx  [...]



我不相信这不是Flash

Mon,22 Feb 2010 10:33:15 +0800

Ajaxian上看到了一个有意思的ppt,这个ppt给我们介绍了一些web的效果和特性不需要使用flash来实现。

(image)

 




Mockingbird 在线的原型设计工具

Sun,08 Nov 2009 00:57:05 +0800

Mockingbird 是基于 Cappuccino 开发的一个在线原型设计工具。

比较喜欢它自动对齐的体验:P 不考虑ie的web app 可以让开发者更加大胆了。

(image)

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




CSS 3.0 参考手册 (中文版)

Mon,24 Aug 2009 12:11:38 +0800

(image)  

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

 

预览页面:

(image)

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

 




漫画:混乱的标记语言XHTML2/HTML5

Fri,31 Jul 2009 01:00:28 +0800

单击图片打开看更好看哟 :P

(image)

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




20个让Web Developer开发生涯更加轻松的工具

Thu,11 Jun 2009 10:48:37 +0800

源文:  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 网格系统是能够让设计师快速创建网页原型的辅助系统。可以比喻成网页的黄金分割线     Em Calculator EM换算器~ ,可以把像素换算成 em 单位。   Browser Shots 多浏览器截屏工具,可以提供多个平台,不同浏览器的页面截屏效果   Icon Finder 还在为找图标发愁么,一个不错的图片搜索工具。   WhatTheFont 当你图片里看到一个好看的文字而不知道字体名称时,可以用它来帮你分析字体类型   MeasureIt firefox插件,可以在页面上显示一个尺子   ColorZilla 同样是firefox插件,可以在页面上取色,前端开发必备   Pingdom 一个在线的抓包工具   Test Everything Test Everything 提供了很多测试工具来测试你的站点。从css html 到seo ,从网络工具到优化应有尽有。   CSS Sprite Generator 样式精灵,这类工具很多了,就是把图片分割并且输出成css   Web Developer Toolbar 也是一个非常强大的web开发工具。   Domainr 域名查询工具,很方面查询域名的使用情况,并且给出未注册域名的建议。(需要翻墙)   Font Burner 字体查询工具,并且提供在线的字体解决方案。仅限英文。   Smush.It 图片优化工具,能够优化你的图片尺寸   Load Impact 可以模拟不同地区的用户访问你的站点的情况。并且以图表的情况反馈结果。[...]