不同平台如何选择网站的中英文字体

作者: · 日期:2009-07-29 19:11:22 评论 »

由于目前在汉化一些WordPress的主题,都会遇到修改CSS的中的字体。或者大家平时都没有注意到这个细节,面对不同的主流浏览器,甚至不同的计算机操作系统,我们应该选择什么样的字体最为合适,尤其是中英文混排的网站。

经过仔细研究和查阅一些文档,还有常用的网站后,得出以下的方案:

font-family: Arial, Tahoma, “宋体”;

当然如果你不太重视字体选择的细节,或者你的网站的访客使用的平台比较单一稳定,而且绝大部分问国内用户,完全可以忽略。以下是我设置上述的字体样式后在Windows平台下(Vista)不同的浏览器的效果:

Windows平台下不同浏览器的效果(点击放大)

Windows平台下不同浏览器的效果(点击放大)

经过测试后,发觉用此CSS字体方案,不同浏览器几乎没有多大变化,因为我的电脑本身安装Arial, Tahoma, 宋体这三种字体,坦白的说是几乎所有的电脑默认都安装Arial, Tahoma字体,最后加宋体是其实必要性不大,但是为了安全起见加上。

切换到Linux平台试试效果:

Ubuntu下的字体样式显示(点击放大)

Ubuntu下的字体样式显示(点击放大)

效果几乎达到一致。再看看各大网站的样式表的字体又是如何安排的,或者我们可以直接学习大网站们所使用字体的主要样式:

Google :  font-family:arial,sans-serif;

百度 :font-family:arial;

Yahoo!中国 : font-family:Arial,Helvetica,sans-serif,SimSun;

新浪 : font-family:”宋体”;

搜狐 :  font-family:’宋体’

腾讯 : font-family:”宋体”,”Arial Narrow”;

CCTV :font-family:Arial,”宋体”;

在以上所有的案例中,出现最多的是Arial和宋体。而我的方案会有Tahoma,是因为Tahoma所有平台都默认带有。

以下是我收集而来的相关资料,很详细的解说各种字体和各种平台的关系:

  1. 网页设计中的字体应用 (1) Font Set
  2. 网页设计中的字体应用 (2) serif 和 sans-serif
  3. 网页设计中的字体应用 (3) 实战应用篇·上
  4. 网页设计中的字体应用 (4) 实战应用篇·下

以上内容为M博客原创,版权归M博客Mblog.cc所有,转载请注明出处。

Advertisement

5 条评论

  1. allarem说道:

    Tahoma倒是我给Windows用户的字体……Linux发行版太多了,默认Bitstream的比较多(比如说Ubuntu)

    • Cody说道:

      我用Windows平台下查看Tahoma和Arial的效果相差不会太大。

      • bluek说道:

        不见得。。。英文的Tahoma 和 Arial 显示的效果是不一样的,还有..Tahoma 的下划线和 Arial比起来就“短了一截” .

        XP后 可以考虑 Verdana 这个不错…

  2. wanjie说道:

    Cody对字体都研究这么细致。厉害。

  3. 我网站优先选择的是微软雅黑。
    毕竟这个中文字体越来越普及了。

评论