SlideShare a Scribd company logo
1 of 19
Download to read offline
第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.html
http://www.cnblogs.com/ruxpinsp1/archive/2008/05/11/font-in-front-end-development-2.html
http://www.cnblogs.com/ruxpinsp1/archive/2008/05/11/font-in-front-end-development-3.html
http://www.cnblogs.com/ruxpinsp1/archive/2008/05/11/font-in-front-end-development-4.html
http://www.blueidea.com/design/doc/2009/6389.asp
http://www.uigarden.net/chinese/ziti
body{
                     font: 12px/1.5 arial;
                  }




http://dancewithnet.com/2009/11/22/default-web-font-style/
宋体
  最通用的显示中文的Web字体
  显示英文、数字、和英文字符效果糟糕
  使用时采用unicode编码(5b8b4f53)


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-face
                Safari、Chrome、Firefox3.5

       .webfont
                使用列表info.xml
                Zip 压缩格式
                Web Open Font Format(WOFF)Firefox3.6

       TypeKit 、Fontdeck、Typotheque
                第三方服务器许可


http://www.docin.com/p-2647154.html
http://internet.solidot.org/internet/09/11/03/0646210.shtml
http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K830.aspx
http://www.comsharp.com/GetKnowledge/zh-CN/CMS_K441.aspx
http://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
YUI3
http://hikejun.com/blog/?p=485
http://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:

如果你选对了人,他们会想方设法的尽可能的
利用先进的科技来让设计师们设计的产品成为
可能,甚至引发科技的创新。当然,如果你选
错了人,那他可能只会对设计师说“丌行,这
是丌可能的”。

More Related Content

Viewers also liked

Санхүүгийн шинжилгээ /санхүүгийн тайлангийн шинжилгээ, харьцаа, санхүүгийн хү...
Санхүүгийн шинжилгээ /санхүүгийн тайлангийн шинжилгээ, харьцаа, санхүүгийн хү...Санхүүгийн шинжилгээ /санхүүгийн тайлангийн шинжилгээ, харьцаа, санхүүгийн хү...
Санхүүгийн шинжилгээ /санхүүгийн тайлангийн шинжилгээ, харьцаа, санхүүгийн хү...
Adilbishiin Gelegjamts
 

Viewers also liked (7)

Fiordaliso poesie- di Angela Tocco
Fiordaliso poesie- di Angela ToccoFiordaliso poesie- di Angela Tocco
Fiordaliso poesie- di Angela Tocco
 
Internet delle cose, Mobile Learning, Augmented Reality
Internet delle cose, Mobile Learning, Augmented RealityInternet delle cose, Mobile Learning, Augmented Reality
Internet delle cose, Mobile Learning, Augmented Reality
 
Хяналт, хяналтын удирдлага, хяналтын үүрэг, хяналтын тогтолцоо ...
Хяналт, хяналтын удирдлага, хяналтын үүрэг, хяналтын тогтолцоо ...Хяналт, хяналтын удирдлага, хяналтын үүрэг, хяналтын тогтолцоо ...
Хяналт, хяналтын удирдлага, хяналтын үүрэг, хяналтын тогтолцоо ...
 
Санхүүгийн шинжилгээ /санхүүгийн тайлангийн шинжилгээ, харьцаа, санхүүгийн хү...
Санхүүгийн шинжилгээ /санхүүгийн тайлангийн шинжилгээ, харьцаа, санхүүгийн хү...Санхүүгийн шинжилгээ /санхүүгийн тайлангийн шинжилгээ, харьцаа, санхүүгийн хү...
Санхүүгийн шинжилгээ /санхүүгийн тайлангийн шинжилгээ, харьцаа, санхүүгийн хү...
 
механизация и переработка
механизация и переработкамеханизация и переработка
механизация и переработка
 
Rapport sur le projet de loi "Déontologie, droits et obligations des fonction...
Rapport sur le projet de loi "Déontologie, droits et obligations des fonction...Rapport sur le projet de loi "Déontologie, droits et obligations des fonction...
Rapport sur le projet de loi "Déontologie, droits et obligations des fonction...
 
Peta Minda Pembelajaran Koperatif
Peta Minda Pembelajaran KoperatifPeta Minda Pembelajaran Koperatif
Peta Minda Pembelajaran Koperatif
 

More from Koubei Banquet

夜宴2期《ActionScript与JavaScript》
夜宴2期《ActionScript与JavaScript》夜宴2期《ActionScript与JavaScript》
夜宴2期《ActionScript与JavaScript》
Koubei Banquet
 
夜宴54期《我的关注》
夜宴54期《我的关注》夜宴54期《我的关注》
夜宴54期《我的关注》
Koubei Banquet
 
夜宴53期《Tail of 2010 》
夜宴53期《Tail of 2010 》夜宴53期《Tail of 2010 》
夜宴53期《Tail of 2010 》
Koubei Banquet
 
夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》
Koubei Banquet
 
夜宴50期《YUI3 editor》
夜宴50期《YUI3 editor》夜宴50期《YUI3 editor》
夜宴50期《YUI3 editor》
Koubei Banquet
 
夜宴49期《YUI Conf 2010》
夜宴49期《YUI Conf 2010》夜宴49期《YUI Conf 2010》
夜宴49期《YUI Conf 2010》
Koubei Banquet
 
夜宴48期《一场关于YUI3/jQuery的精彩辩论》
夜宴48期《一场关于YUI3/jQuery的精彩辩论》夜宴48期《一场关于YUI3/jQuery的精彩辩论》
夜宴48期《一场关于YUI3/jQuery的精彩辩论》
Koubei Banquet
 
夜宴47期《一个艰难的决定》
夜宴47期《一个艰难的决定》夜宴47期《一个艰难的决定》
夜宴47期《一个艰难的决定》
Koubei Banquet
 
夜宴45期《Sociability is complex》
夜宴45期《Sociability is complex》夜宴45期《Sociability is complex》
夜宴45期《Sociability is complex》
Koubei Banquet
 
夜宴44期《我们蛋疼的年代——安全篇》
夜宴44期《我们蛋疼的年代——安全篇》夜宴44期《我们蛋疼的年代——安全篇》
夜宴44期《我们蛋疼的年代——安全篇》
Koubei Banquet
 
夜宴43期《Auto Tools》
夜宴43期《Auto Tools》夜宴43期《Auto Tools》
夜宴43期《Auto Tools》
Koubei Banquet
 
夜宴42期《Gadgets》
夜宴42期《Gadgets》夜宴42期《Gadgets》
夜宴42期《Gadgets》
Koubei Banquet
 
夜宴41期《新事》
夜宴41期《新事》夜宴41期《新事》
夜宴41期《新事》
Koubei Banquet
 
夜宴40期《表单-反馈-体验》
夜宴40期《表单-反馈-体验》夜宴40期《表单-反馈-体验》
夜宴40期《表单-反馈-体验》
Koubei Banquet
 
夜宴39期《Seven》
夜宴39期《Seven》夜宴39期《Seven》
夜宴39期《Seven》
Koubei Banquet
 
夜宴38期《侵权 & 山寨》
夜宴38期《侵权 & 山寨》夜宴38期《侵权 & 山寨》
夜宴38期《侵权 & 山寨》
Koubei Banquet
 
夜宴37期《专利》
夜宴37期《专利》夜宴37期《专利》
夜宴37期《专利》
Koubei Banquet
 
夜宴35期《质量?》
夜宴35期《质量?》夜宴35期《质量?》
夜宴35期《质量?》
Koubei Banquet
 
夜宴33期《未来是湿的》
夜宴33期《未来是湿的》夜宴33期《未来是湿的》
夜宴33期《未来是湿的》
Koubei Banquet
 
夜宴32期《WordPress and so on》
夜宴32期《WordPress and so on》夜宴32期《WordPress and so on》
夜宴32期《WordPress and so on》
Koubei Banquet
 

More from Koubei Banquet (20)

夜宴2期《ActionScript与JavaScript》
夜宴2期《ActionScript与JavaScript》夜宴2期《ActionScript与JavaScript》
夜宴2期《ActionScript与JavaScript》
 
夜宴54期《我的关注》
夜宴54期《我的关注》夜宴54期《我的关注》
夜宴54期《我的关注》
 
夜宴53期《Tail of 2010 》
夜宴53期《Tail of 2010 》夜宴53期《Tail of 2010 》
夜宴53期《Tail of 2010 》
 
夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》
 
夜宴50期《YUI3 editor》
夜宴50期《YUI3 editor》夜宴50期《YUI3 editor》
夜宴50期《YUI3 editor》
 
夜宴49期《YUI Conf 2010》
夜宴49期《YUI Conf 2010》夜宴49期《YUI Conf 2010》
夜宴49期《YUI Conf 2010》
 
夜宴48期《一场关于YUI3/jQuery的精彩辩论》
夜宴48期《一场关于YUI3/jQuery的精彩辩论》夜宴48期《一场关于YUI3/jQuery的精彩辩论》
夜宴48期《一场关于YUI3/jQuery的精彩辩论》
 
夜宴47期《一个艰难的决定》
夜宴47期《一个艰难的决定》夜宴47期《一个艰难的决定》
夜宴47期《一个艰难的决定》
 
夜宴45期《Sociability is complex》
夜宴45期《Sociability is complex》夜宴45期《Sociability is complex》
夜宴45期《Sociability is complex》
 
夜宴44期《我们蛋疼的年代——安全篇》
夜宴44期《我们蛋疼的年代——安全篇》夜宴44期《我们蛋疼的年代——安全篇》
夜宴44期《我们蛋疼的年代——安全篇》
 
夜宴43期《Auto Tools》
夜宴43期《Auto Tools》夜宴43期《Auto Tools》
夜宴43期《Auto Tools》
 
夜宴42期《Gadgets》
夜宴42期《Gadgets》夜宴42期《Gadgets》
夜宴42期《Gadgets》
 
夜宴41期《新事》
夜宴41期《新事》夜宴41期《新事》
夜宴41期《新事》
 
夜宴40期《表单-反馈-体验》
夜宴40期《表单-反馈-体验》夜宴40期《表单-反馈-体验》
夜宴40期《表单-反馈-体验》
 
夜宴39期《Seven》
夜宴39期《Seven》夜宴39期《Seven》
夜宴39期《Seven》
 
夜宴38期《侵权 & 山寨》
夜宴38期《侵权 & 山寨》夜宴38期《侵权 & 山寨》
夜宴38期《侵权 & 山寨》
 
夜宴37期《专利》
夜宴37期《专利》夜宴37期《专利》
夜宴37期《专利》
 
夜宴35期《质量?》
夜宴35期《质量?》夜宴35期《质量?》
夜宴35期《质量?》
 
夜宴33期《未来是湿的》
夜宴33期《未来是湿的》夜宴33期《未来是湿的》
夜宴33期《未来是湿的》
 
夜宴32期《WordPress and so on》
夜宴32期《WordPress and so on》夜宴32期《WordPress and so on》
夜宴32期《WordPress and so on》
 

夜宴10期《Web字符那点事》