我想网 » Font

通常用户看到的页面的样式会受到三层控制，第一层是浏览器的默认样式，第二层是网页定义样式，第三层是用户自定义样式。和CSS一样，后面的优先级高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能，但是极少数会有用户去自定义，一般用也是高级用户。而浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。

以后准备使用如下默认字体样式：

body{
  font: 12px/1.5 arial;
}

字体：arial

我们页面的绝大部分内容字符都是中文，毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体，但是宋体在显示英文、数字和英文符号时过于糟糕，比如©字符，所以我们一般期望通过CSS来实现用更好的字体样式来显示它们，然后用宋体来显示中文和中文符号。之所以选择arial是因为：

Windows和Mac都预装了这款字体，应该是使用最广泛的网页字体了。它的潜在对手tahoma和helvetica就没有这么幸运了。
视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘宝的默认字体样式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;这是一个很不错的选择，但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。
一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，比如Google的设置为font-family:arial,sans-serif;，但是至少在非中文版的Win7下当编码是GBK时，IE8会因sans-serif来渲染宋体，导致字体出现变形，这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。
因为中文字体的选择非常有限，所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用font-family:arial;可以从侧面说明这样做的安全性。可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑，这是因为谋智网络擅自修改了用户自定义样式，不允许网页的样式覆盖浏览器设置的样式。也是由于类似的情况，我们要弹性设计网页非常重要。

使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大部分情况，但是都不会很完美，如果把字体改成“宋体”能彻底的解决问题。很明显，这个问题只出现在IE上。所以，如果你的网站很少使用英文、数字和英文符号，那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。

大小：12px

12px是宋体能显示的极限，虽然微软雅黑能显示更小的字体，但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体，所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。
不用考虑基于字体大小（em）的设计。
在Chrome3.0之后的中文版中，字体大小最小值是12px，比如你设置最小字体为10px，最后也变成12px。

行高：1.5倍

这是一个经验值，不同的产品对这个值要求可能不同，但我们一般会设置最常用的为默认值。比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小默认值是13px，行高是13*1.231=16.003px，默认的行高是默认字体的1.231倍。对于中文来说，常用的字体大小12px、14px、16px、18px等偶数大小，在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。
在IE6和IE7中，行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。
设置line-height时，注意不要使用单位（包括%在内），因为子节点会继承经过运算后的line-height值，所以当使用单位后浏览器会把line-height计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而无单位的数值表示是所在容器的font-size的倍数，所以设置为无单位的数值是最佳选择。
深入CSS 行高非常有利于理解line-height，值得一读。

性能和效率

大部分平台都有arial，减少浏览器的查找时间。
代码最少，书写方便。arial基本上是名字最短的字体了，可以节约CSS的大小。
所有的字母都小写，目前Google就是这样做的，好处是既可以编写更快也能提升Gzip压缩的效率。
中文最好用unicode表示，比如使用宋体是{font-family:\5b8b\4f53;}，使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}，这样的好处是避免编码问题，同时能得到所有的主流浏览器的支持。
使用正确的字体种类写法，避免使用引号，这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。

未来

通过对中英文及符号混排的测试，我发现微软雅黑其实表现相当不错，包括英文数字和英文字符以及在IE6和IE7的显示效果上，但唯一的遗憾是在XP下如果安装了微软雅黑字体的用户没有打开“使用屏幕字体的边缘平滑”选项的话，在Firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。针对这个问题目前并没有很好的解决方案，所以只有等到IE6使用比率非常小的时候才可能正式的使用它。或许需要到2014年，XP死掉的时候。
虽然很早就有了@font-face，但是浏览器的支持、网速和商业问题，导致它很少被应用。最近关于字体的好消息是Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体：现状与未来和再谈 Web 字体的现状与未来。

最后推荐一下玉伯的《再谈 Web 默认字体》

标签：Font, Font, Web, WEB

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

75个最佳Web设计资源

seasun — Tue, 21 Apr 2009 04:48:54 +0000

eroading_web_resources

来自 eRoading 的一组 Web 设计资源大全，包括字体，CSS 资源，Logo 设计资源，图标，设计启发，教程，Photoshop 素材下载，以及 WordPress 资源。每个类别又包含数十套该类别下的具体资源，可能是有关 Web 设计的终极资源了。强烈推荐！

字体

- 60 套公司用设计字体 [Smashing Magazine]

- 20 套免费手写字体与资源 [Fuel Your Creativity]

- 50 套专业Web设计与印刷用字体 [Noupe]

- 15 套漂亮的高质量免费字体 [Smashing Magazine]

- 21 套来自 DeviantArt 的艺术字体 [Designflavr]

- 设计专业人士使用的7套最佳字体 [Just Creative Design]

- 45 套符合现代设计趋势的免费漂亮字体 [Six Revisions]

CSS

- 50 个强大的 CSS 实用工具 [Smashing Magazine]

- 30 套 CSS 小炒资料 [All Web Design Resources]

- CSS 编辑器评测 [Smashing Magazine]

- CSS 高手的 10 个原则 [NETTUTS]

- 2008 最佳 CSS 设计（中文） [Web Designer Wall]

- 40 个 CSS 生成器 [All Web Design Resources]

- 重置你的CSS [Six Revisions]

- 实现干净代码的12条定律（中文） [Smashing Magazine]

Logo 设计

- 81 个最佳 Logo 设计资源 [Logo Design Love]

- 最佳Logo设计资源 [Just Creative Design]

- 105 个Logo设计资源 [Elite By Design]

- 35 个令人目眩的黑白 Logo [Siah Design]

- 50 套能够带来启发的 Logo [Fuel Your Creativity]

- 2008 年 33 个不俗的 Logo 重设计 [Smashing Apps]

- 30 个精彩的矢量 Logo 设计 [VECTORTUTS]

- 10 个成功的 Logo 设计 [Logo Design Love]

图标

- 2008年50套最漂亮的图标 [Noupe]

- 40 套漂亮的免费图标 [Six Revisions]

- 22 套全新高品质免费图标 [Elite By Design]

- 40 套超漂亮的图标 [Noupe]

设计启发

- 50 个漂亮的博客设计 [Smashing Magazine]

- 40 个有创意的按钮 [PSDTUTS]

- 60 个非常 Cool 非常有创意的 404 页面 [Hongkiat]

- 30 个漂亮的 Web 设计例子 [Six Revisions]

- 2008年40个具有启发性的 Web 设计 [CrazyLeaf Design Blog]

- 50 个漂亮的导航菜单 [Vandelay Website Design]

- Web 设计中的57个矢量字符 [CSSLeak]

- 50 个漂亮的，有创意的展示类站点设计 [Smashing Magazine]

- 40 个漂亮的暗色系 CSS 设计 [Toxel]

- 40 个漂亮的手画 Web 设计 [CSSBuilt]

- 79 个精彩的专辑封面 [Inspiredology]

- 40 套有创意的名片设计 [Toxel]

- 纹理与图样设计展示 [Smashing Magazine]

- 54 幅令人灵魂出窍的数字画 [PSDTUTS]

- 50 个出色的博客页脚设计 [Hongkiat]

- 24 个漂亮的，有创意的网站 Header 设计 [Toxel]

- 富有灵感的 PDF 杂志设计 [Smashing Magazine]

教程

- 41 个最好的 Photoshop 效果教程 [Hongkiat]

- 30 个漂亮的 Photoshop 文字效果教程 [Six Revisions]

- 70 个 Photoshop 美容教程 [Smashing Magazine]

- 50 个很棒的 Photoshop 教程 [PSDTUTS]

- 30 个 Fireworks 教程 [Arbent]

- Adobe Fireworks 教程与下载 [Smashing Magazine]

- 40 个 Wacom 数字画板教程 [DesignM.ag]

- 50 个出色的 AJAX 教程 [Smashing Magazine]

- 50 个富有创意的 Photoshop 文字效果教程 [PSDTUTS]

- 23 个不可思议的 Photoshop 教程 [Elite By Design]

- Adobe Illustrator 教程 [Smashing Magazine]

Photoshop 资源下载

- Photoshop Custom Shapes 集 [Smashing Magazine]

- 20 个 Photoshop 印刷作品与画笔资源 [PSDTUTS]

- 75 个超高分辨率 Photoshop 画笔 [Elite By Design]

- 50 个不可或缺的 Photoshop 画笔 [Smashing Magazine]

- 200 套 Photoshop 画笔 [You the Designer]

- 50 套免费的 Photoshop Pattern [Emma Alvarez]

- 55 套免费的画笔与矢量图 [Web Resources Depot]

- 40 套 Photoshop 万圣节主题画笔 [PSDFan]

WordPress

- 100 出色的 Wordpress 免费主题 [Smashing Magazine]

- 30 个最实用的 Wordpress 技巧 [Hongkiat]

- 45 套免费的 Wordpress 网格布局主题 [WPZOOM]

- 45 套必须要看到 WordPress 主题 [Noupe]

- 20 套 Wordpress 公司网站主题 [Blogsessive]

- 24 套高质量免费 Wordpress 主题 [Toxel]

- 21 套令人耳目一新的免费Wordpress主题 [Smashing Apps]

- 50 套漂亮的免费 Wordpress 主题 [Six Revisions]

- 10 个寻找免费 Wordpress 主题的地方 [UPrinting]

- 50 个最好的 Wordpress 主题 [CrazyLeaf Design Blog]

- 10 个 Wordpress 实用 RSS 技巧 [Smashing Magazine]

- 45 个出色的免费 Wordpress 主题 [DzineBlog]

标签：Assemble, Design, Design, Font, Icon, Marrow, Web, WEB, 程序源码

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

国外21个最热门的免费字体下载网站

seasun — Fri, 03 Apr 2009 04:49:22 +0000

作为一名设计师，我一直在寻找更多酷炫的免费字体，以此扩大我的字体珍藏。字体在设计中的影响是惊人的，不同的字体，可以完全改变一个设计风格，所以选择合适的字体是很重要的，但它并不容易。我们需要更多的选择，所以这里收集了21个最热门的提供免费字体的网站。专为爱好设计尤其爱好Typograhpy的你。

1001FreeFonts

支持平台: PC, Mac

拥有字体: 超过6000

1001fonts

支持平台: PC, Mac

拥有字体:超过2600

字体预览: 支持

最新字体, 热门字体, Most Popular

FontFreak

支持平台: PC, Mac

拥有字体:超过5000

最新字体

Acid Fonts

支持平台: PC, Mac (Need to convert)

Font Reactor

支持平台: PC

字体预览: 支持

最新字体, Most Downloaded, 热门字体

FontFace

支持平台: PC, Mac

字体预览:支持

热门字体

SketchPad

支持平台: PC, Mac

Abstract Fonts

支持平台: PC, Mac

拥有字体:超过11,000

字体预览:支持

支持平台: PC, Mac

支持平台: PC, Mac

拥有字体:超过8000

字体预览: 支持

最新字体, 热门字体

DaFont

支持平台: PC, Mac

字体预览:支持

最新字体, 热门字体

Search Free Fonts

支持平台: PC

Font Paradise

支持平台: PC

拥有字体:超过2800

字体预览:支持

SimpleTheBest

支持平台: PC, Mac

字体预览:支持

支持平台: PC, Mac

支持平台: PC

支持平台: PC, Mac

字体预览: 支持

标签：Assemble, Font, Font, Marrow

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

30+免费字体下载网站

seasun — Fri, 03 Apr 2009 04:47:53 +0000

面要介绍的都是国内的一些提供免费字体下载的网站. 说实话, 从专业性和易用性上来说, 这些网站还真没法跟国外的字体下载站相比. 但没办法, 国外收集中文字体的网站也不是太多. 所以我们还是需要看看国内这些字体下载站点.

下面, 就为大家精选了30个免费字体下载网站, 希望你能从中找到自己需要的字体.

1. 字体下载大宝库

这个字体下载站提供精制字体, 非英字体, 艺术字体, 哥特字体, 简单字体, 手写字体, 图案字体, 节日字体, 中文字体和著名字体等. 支持字体搜索和字体截图演示. 免费字体下载.

2. K666字体下载站

提供接近10000个免费字体下载. 字体分类和上面的也差不多, 只是网站格局上可以更加适合查找, 每个分类下会显示10个最新更新的字体. 提供有一个字体下载排行榜, 不过遗憾的是没有字体效果预览.

3. 字体中国

专业的字体下载和分享. 可以按关键词搜索字体, 可以按字体分类查找字体, 也可以按英文字母排序或中文声母排序查找字体. 支持字体截图预览, 同时该网站还有一些比较特别的专题, 除了最新更新字体, 下载最多字体等列表外, 还提供有例如”设计师使用最多的字体“之类的特别专题.

4. 字体之家

这个网站除了提供免费字体下载>之外, 还提供各种有趣实用的字体工具, 比如字体浏览器, 毛笔字生成器, 字体修复大师等等. 另外还设有字体知识等专栏. 你可以在这里找到许多特别的字体下载.

5. 模板天下-字体频道

没多少特别, 多一个选择而已, 支持字体截图预览. 界面的排版还算整洁清爽.

6. 设计无限 – 字体频道 – 提供有中文字体和英文字体专栏, 支持字体截图预览. 相对于其它免费字体下载网站, 这个网站所提供的字体预览包括中文和英文字母的预览效果.

7. 站长网的字体频道

8. 素材网字体下载

9. 字体字库下载 – 包括中文字体字库, 英文字体字库, 广告字体字库, IT部落格字体字库等等.

10. 天空畅想字体库 – 提供中文字体,英文字体,其他国家字体以及各种书法字体共1000多种.

11. 中国下载站字体下载 – 提供上万种各类精典设计字体下载，包括：长城字体、方正字体、金桥字体、金山字体、文鼎字体、汉仪字体、汉鼎字体、微软字体、经典字体、华康字体、金梅字体、华文字体、迷你字体、四通利方、昆仑字体、中国龙字体、富汉通字体、超世纪字体等、英文字体、特殊字体、像素字体、手写字体、外来字体、艺术字体、基本字体、图案字体、节日字体、著名字体、哥特字体,所字体都配有演示图片

12. 字体大全 – 字体下载 – 为网页爱好者提供免费的网页设计素材和交流平台.

13.网页制作大宝库字体下载-字库下载-QQ字体下载

14. JSCODE – 提供丰富全面的网页特效代码和网页教程素材等资源，包括常用的网页鼠标特效，网页背景特效，文字特效，链接特效等20多类效果。另外还提供网页制作相关的模版、素材、Flash、字体等资源。

15. 点点印象 – 点点印象字体下载站拥有大量字体,中文字体下载,字体库,艺术字体,个性字体以及流行的各种手写字体,书法字体以及字体软件和工具免费下载.

16.SUPFREE字体下载 – 免费的字体下载网站. 挺简洁的一个网站.

17. 字体精品网字体下载

18. 百素字体库

19.英文字体下载- 提供超过4680种英文字体免费下载.

20.中国字体- 专业的字体字库免费下载网站,中文英文字体下载

21.U+fonts Traditional Chinese提供很多類型的繁體字體供我們下載。選到喜歡的字體後，就要留意這字體的檔案名稱。當你點選「download」之後，你就需要在一個資料夾中搜尋該檔案了。

23.Free Chinese Fonts提供17種中文字體，有繁體，亦有簡體的。

24.字體中國提供超大量的中文字體讓大家下載，而且全都分門別類，讓大家易於搜尋。不過其中已經有些下載的結連失效。

25. YaoMao de Font Down也是另一個提供大量中文字體的下載網站。

26. 3lian.com素材網提供六大類的中文字體，包括創藝、華康、方正、漢鼎、漢儀及文鼎。

27. 破釜沈舟這網站的名字雖然是怪怪的，但也提供了大量的字體供瀏覽人士下載。

28. University of Heidelberg也有一個Free Chinese Fonts for Win9x/NT/2000/XP網頁。不過這網頁的下載速度比較慢。

29. University of Heidelberg同時推薦了另一個中文字體下載站：設計無限。

30. 七色風網頁家園提供超過100種中文字體供我們下載。以上繁体字介绍来自这里

下面是另外一些国内优秀的免费字体下载网站或字体下载和分享社区:

31. Fontstruct – 是一个免费的字体创建的具，由专业的字体网站Fontshop提供。

32. Typetester – 可以提供同进对三种字体的文本效果进行对比，且可以同时看到这三种字体在标准、粗体、斜体、粗斜体下的显示效果。你可以填入显示文本，然后对文字的大小进比较.

33. Fawnt以Ajax效果为基础，收集很多用免费的在线网页字体资源网站。其网站非常专业，首页给出即时的最热门字体。你可以在线查看这次字体的文本演示，也可以免费的Download它，还可以发送到手机或分享到你的博客。

标签：Assemble, Font, Font, Marrow

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh