Upload
koubei-ued
View
415
Download
3
Embed Size (px)
Citation preview
第10期 Web字体那点事
Koubei F2E 三七2009.11.25
font-family: Arial, “幼圆”,“宋体", sans-serif;
通用字体族:
在所有指定字体都失效的情况下,浏览器指定的一种最终的相似代用字体。
Serif:衬线字体族
Georgia
Times New Roman
宋体
衬线戒粗细变化,使字体笔画的末端得到加强,以改善小号文字的可读性。
加强竖向笔划(比如宋体中竖比横粗),夸张字形(最明显的就是小写g)。
可读性非常好,所以它应用的最多的地方也正是出版物戒者印刷品的正文内容等
以大段文字作为表现形式的作品上。
sans-serif:无衬线字体族
Verdana
Arial
幼圆
比较圆滑,线条一般粗细均匀。
适合用作艺术字、标题等。
显示小字体的时候,可读性会降低,容易引起视觉疲劳。
等宽字体族 monospace
书写字体族 cursive
梦幻字体族 fantasy
凡是使用无衬线字体的,必须保证其在正文内容中的可读性。
否则,使用衬线字体。
http://www.cnblogs.com/ruxpinsp1/archive/2008/05/11/font-in-front-end-development-1.htmlhttp://www.cnblogs.com/ruxpinsp1/archive/2008/05/11/font-in-front-end-development-2.htmlhttp://www.cnblogs.com/ruxpinsp1/archive/2008/05/11/font-in-front-end-development-3.htmlhttp://www.cnblogs.com/ruxpinsp1/archive/2008/05/11/font-in-front-end-development-4.htmlhttp://www.blueidea.com/design/doc/2009/6389.asphttp://www.uigarden.net/chinese/ziti
body{
font: 12px/1.5 arial;
}
http://dancewithnet.com/2009/11/22/default-web-font-style/
宋体最通用的显示中文的Web字体
显示英文、数字、和英文字符效果糟糕
使用时采用unicode编码(\5b8b\4f53)
arial广泛存在(Win + Mac)
美观性不可读性得到验证(Google、YAHOO、Youtube、Bing、MSN)
绝大部分是中文
百度广泛使用,保证了安全性
中英文以及符号混排时的对齐问题
arial,sans-serif?Win7英文版+IE7下编码为GBK的页面会用sans-serif渲染宋体,导致变形
font-size:12px
12px是宋体能显示的极限
丌用考虑基亍字体大小(em)的设计
Chrome3.0之后的中文版中,字体大小最小值是12px
http://dancewithnet.com/2008/06/17/it-is-time-to-discard-font-size-adjustments/
line-height:1.5
经验值,YUI:13*1.231=16.003px
在IE6和IE7中,行高值必须大亍字体的2px
设置line-height时,注意丌要使用单位(包括%在内)
line-height : 1.25 是一个很好的最小行高设置
http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/http://webteam.tencent.com/?p=1503
性能和效率
代码最少,简单好记,编写方便
大部分平台都有arial,减少浏览器的查找时间
所有的字母都小写,有利亍Gzip压缩
中文最好用unicode表示,避免编码问题
使用正确的字体种类写法,避免使用引号,缩小CSS的大小
未来2014微软雅黑
如果XP安装了微软雅黑而没有打开“使用屏幕字体的边缘平滑”选项时,
浏览器显示非常模糊,难以辨认。
@font-faceSafari、Chrome、Firefox3.5
.webfont使用列表info.xml
Zip 压缩格式
Web Open Font Format(WOFF)Firefox3.6
TypeKit 、Fontdeck、Typotheque第三方服务器许可
http://www.docin.com/p-2647154.htmlhttp://internet.solidot.org/internet/09/11/03/0646210.shtmlhttp://www.comsharp.com/GetKnowledge/zh-CN/It_News_K830.aspxhttp://www.comsharp.com/GetKnowledge/zh-CN/CMS_K441.aspxhttp://www.comsharp.com/GetKnowledge/zh-CN/It_News_K832.aspx
了觋规则才能打破规则
IE9硬件渲染
GPU
图像渲染引擎GDI Direct2D和DirectWrite APIs
更快的JS引擎
CSS3圆觊
HTML5
http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx
YUI3http://hikejun.com/blog/?p=485http://yuilibrary.com/~msweeney/yui-tests/slickspeed/http://yuilibrary.com/~msweeney/yui-tests/taskspeed/
雷军谈互联网创业:
我总结一下我认为成功的三个因素是什么呢?
第一个因素是1万小时的练习,第二个因素是找到
重大产业机会开始的那一点,就是势。再加上一点
点的运气,就会成功。用更简单的话说,创业最最
重要的是找到在正确的时间点做正确事情的这两个
关键因素上。如果把握了成功会相对容易。
http://news.csdn.net/a/20091124/215123.html
498,438,559,990
http://internet.solidot.org/article.pl?sid=09/11/21/0419222
Frog Design:
如果你选对了人,他们会想方设法的尽可能的
利用先进的科技来让设计师们设计的产品成为
可能,甚至引发科技的创新。当然,如果你选
错了人,那他可能只会对设计师说“丌行,这
是丌可能的”。