关于 Web 页面字体这方面,我是门外汉,弄不出来长篇大论 — 这样也没必要,从观察统计上简单分析一下看看就够了。
几个页面字体适配度比较好的,HTML body 字体的定义:
- Google: font-family: arial,sans-serif;
- Twitter:font: 13px/1.5 Helvetica Neue,Arial,Helvetica,’Liberation Sans’,FreeSans,sans-serif
- 豆瓣:font: 12px/162% Arial,Helvetica,sans-serif;
- 新浪微博:font-family: Arial,Helvetica,sans-serif;
- Apple中国:font: 12px/18px “Lucida Grande”,”Lucida Sans Unicode”,Helvetica,Arial,Verdana,sans-serif;
- 知乎: font: 13px/22px ‘Helvetica Neue’,Helvetica,Arial,Sans-serif;
- Facebook: font-family: “lucida grande”,tahoma,verdana,arial,sans-serif;
- Google+: font: 13px arial,sans-serif;
结论:Arial,Helvetica,San-serif 这个组合适配性是最好的,也是最保险的. 可选:Helvetica Neue . 知乎的定义几乎可以直接照用.
其它:
- 微软中国: font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif;
- 淘宝:font: 12px/1.5 tahoma,arial,宋体; //看过淘宝同学写过的很棒的字体文章,估计页面不是统一定义的.
- 百度:font: 12px arial;
- QQ: font-family: “宋体”,”Arial Narrow”;
- 新浪:font-family: “SimSun”,”Arial Narrow”; //最烂
结论:用了宋体的,都比较烂 … 中文网站要想页面视觉稍微好一点,直接去掉 CSS 中的宋体.
–EOF–
Updated: 对于个人站点,字体可以尽情发挥。
Updated 2: 新浪的同学解释说,之所以用宋体,是因为”宋体的半角字符是等宽字体(1/2个全角),长度的标题不会因出现英文或数字而折行”。估计是历史原因吧,相信这个问题总是有解的,看怎么解决罢了。
字体不设置宋体是王道,跨平台极度蛋疼。
微软一直是Web和自己操作系统字体匹配,Windows 2000/XP时代是Tahoma和Verdana,Windows Vista和Windows 7时代是Segoe系列,至于更早,我就弄不清了。
大辉应该还考虑一下 serif和san-serif字体的差别。做一下对比
不过介于Windows堆serif字体渲染比较差。。。。Georgia 字体就被中文网站忽略了
/*
* NetEase Javascript Library v1.2.5
*
* Modified from
* jRaiser Javascript Library
* http://code.google.com/p/jraiser/
* Copyright 2008-2010 Heero.Luo (http://heeroluo.net/)
*
* licensed under MIT license
*
* Creation date: 2008/2/6
* Modified date: 2010/8/4
*/
看看网易多聪明呀!我也一直觉得在中国可以称上老大也就这一家了。对开源的支持也是没有说话了,更新快、速度快,我用的ubuntu,一直用163的源。
中文字体都比较麻烦。问题有二
第一,中国很少有设计师会静下心来设计字体
第二,中文字也实在太多了
因此,各个网站的解决方案会比较雷同。
每种写法都是其自身需求的,没有最好,只有最适合,至少新浪首页是这样做的。
新浪首页使用宋体是因为新闻标题不能折行,只有宋体的半角字符是等宽字体(1/2个全角),目的是同长度的标题不会因出现英文或数字而折行,而Arial Narrow是在Mac下最接近宋体半角的,这是经验我们测试的。但这种写法还是有一个小问题,能发现吗?
大家多用Arial是因为大家觉得它好看点,其实中文网页设置什么字体基本没有意义,因为我们看到的大多数文字是汉字,而所说的Arial、Tahoma之类都是英文字体,对汉字不起作用的。以目前的网速汉字是不太可能使用CSS嵌入字体的,也就意味着你只能使用用户系统中存在的字体,那基本就只有宋体、黑体了。所以目前不要为字体支纠结,除非你有特殊需求。
PS:前段时间方正来我们公司推广过动态生成小字库,但也不太实用,有兴趣的可以找方正了解一下。
原来是为了西文部分的等宽啊,我说怎么中文门户网站都不约而同地采用了宋体呢。中文字体真蛋疼。
如果网站用的字体在用户机器上没有的话,会非常悲剧。
中文的字体文件又死大的。首先为了多浏览器支持,需要准备各种格式的字体文件,然后这些字体动不动就30-40m,产品环境压缩后也有10多m。如果不做优化的话,单单下载字体就能让很多浏览器页面不渲染,一直下载字体文件。中国的网速你懂的,搞不好30秒一个页面还没显示出来。
小字体库也不给力,中文字体文件的大小还是太大。如果一些用到很少字的地方需要使用特殊字体的话(比如菜单,非图片和flash的广告标语),最快而且兼容绝大多数主流浏览器的方法是把每个用到的字做成base64写入css之中,下载速度是飞快了,维护起来绝对是死,只能写自动化干这活。
对于要用特殊字体的网站,真的是伤不起啊。
刚入门,最近在做自己的网页,即使让这个字体整的我一夜一夜睡不着觉啊!
中文的话还是别搞些花哨字体了⋯⋯font-face之类就适合英文字体。
前一段好像是csstrick写的吧,提到font-family只要一个sans-serif就行了。Mac会自动换Helvetica,Win会用arial。
14px 加上 9px 最合适的了。网易调用也就根据不同的ie版本,调用css校式。
“结论:用了宋体的,都比较烂 … 中文网站要想页面视觉稍微好一点,直接去掉 CSS 中的宋体.”
为什么?为了让外国人看我们的中文门户网页舒服点吗?
CSS永远没法找到完美的解决方案,以下的几个Bug:
1. 英文Windows操作系统下,IE8如果最后不指定宋体的话,会很难看。
2. 只写Sans-seif,在Firefox下面某编码默认的是宋体,会用宋体的中文部分显示,非常难看。
3. 以上的写法,淘宝的最安全。
现在mac也自带arial了,所以Google的写法是最简单和通用的。即使不带arialmac也会自动用helvetica,写不写都无所谓。
用xp的ie6看看所谓的微软雅黑吧~也烂到掉渣!在中国你就必须要苦逼地支持ie!