1. 1. 字体选择
    1. 1.1. 解决方法基本有三个:
    2. 1.2. 字体fallback
  2. 2. 字号
  3. 3. 每行35-60个汉子
  4. 4. 行高
  5. 5. 段间距离
  6. 6. 颜色
  7. 7. 待更新
  8. 8. 扩展资料:
Table of Contents ▼

Web中文字体排版指南

前几年有一种说法,网页95%都是排版。这种说法,即使是现在,作为Web开发人员,我们也应该足够重视排版。有时候看到一个网页,就是觉得别扭,不好看,但是作为程序员真的不知道到底哪出了问题!
要是有时间,你一定要读一下《写给大家看的设计书》,这本书里边讲了很多简单适用的设计原则,包括亲密性对齐重复对比颜色等简单适用的原则)

在没有设计师帮助下,排版和颜色经常是最让我头疼的事,怎么放怎么挑都觉得没有人家专业学设计的好看,但是后来发现,有一些规则,可以快速地让设计看起来更加专业。

简单文字排版:http://www.lhyum.com/demo/lesson_1/

字体选择

好的字体,会帮助你的网页看起来更加输入自然。
在网页中,中文字体的选择一直都是一个麻烦事,选择中文字体时,你需要考虑到:

  1. 用户本地的字体有限,你需要兼容不同的操作系统。对于Windows而言,可能就只有预装的宋体、黑体、楷体、仿宋、微软雅黑,如果你网页用了OS X的Helvetica,在Windows,用户实际看到的是Arial
  2. 中文字体体积太大,使用Web Font好像不划算。英文就只有26个字母,但是中文常用汉字就有几千呀,为了看个几百K的网页,要下载几兆的字体,你觉得真的合适么?
  3. 不同浏览器对字体的支持也不一样,还没有一种通吃所有浏览器的字体格式(这算是Web Font难做的原因)
    浏览器支持的字体格式

解决方法基本有三个:

  1. 最简单的方法,老老实实制定安全的字体,利用好fallback。
  2. 寻找相似字体,你可以在CSS Font Stack,查找Windows和Mac上相似的字体
  3. 还是利用Web Font,推荐font spider,能够解决大小和兼容性的问题。

字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

字体fallback

font-family:"Hiragino Sans GB","华文细黑","STHeiti","微软雅黑", "Microsoft YaHei",SimHei,"Helvetica Neue",Helvetica,Arial,sans-serif;

fallback俗称备胎,前边的字体没有(或者不包括要渲染的文字),就用后边的,如果所有列出的字体都没有,那么系统会自动匹配类似的字体(同一系列,网页上可以把字体划分为5类,具体请参见W3C)。
注意:先指定英文字体,再指定中文字体。不然,渲染出来的是中文的英文和中文的中文(⊙﹏⊙)b(我们要的应该是英文的英文和中文的中文)

参考了苹果、小米、魅族、typebeauty后,整理如下:
OS X上:HanHei SC,苹方(PingFang SC)
Windows:中易宋体(SimSun),微软雅黑(Microsoft YaHei)
Linux:思源黑体(Source Han Sans CN),文泉驿米黑(WenQuanYi Microhei)
写成font-family:
font-family: "Helvetica Neue",Helvetica, Arial, "HanHei SC", "PingFang SC", SimSun,"Source Han Sans CN", "Microsoft YaHei", "WenQuanYi Microhei", sans-serif;

字号

我们先定一个基础字号16px(大部分浏览器默认的也是16px),16~24px之间的字号作为阅读都很舒服,都可以作为正文内容的大小。

不同等级的标题,需要用到不同的字号和粗细,反映出文章结构的变化。

h1{
  font-size: 2.25em;
}
h2{
  font-size: 2em;
}
h3{
  font-size: 1.7em;
}
h4{
  font-size: 1.4em;
}
h5, h6{
  font-size: 1.2em;
}

每行35-60个汉子

一行中,如果字数太多,会给读者压迫感。字数太少,视线跳动太频繁,很容易让人疲倦。
英文一般控制在40-90个单词,中文30-60个字。

行高

1.5倍的行高目前是采用最广泛的,但是不同字体,给人感觉不一样,所以我一般采用1.8倍的行高,你可以根据自己的需要进行调整。需要注意的是,标题由于字体很大,如果再设置1.8的行高,换行会出现中间间距过大的问题,标题的行高要记得小一些:

h1,h2,h3,h4,h5,h6{
  line-height: 1.1em;
  font-weight: 300;
}
p{
    line-height: 1.8em;
}

段间距离

h1, h2, h3, h4, h5, h6{
    margin-bottom: .2em;
    margin-top: .7em;
}
p{
    margin-bottom: 1.8em;
}

颜色

颜色和背景、字体、大小都息息相关。以最常见的白色背景为例,如果我们页面的字体比较粗,相对不那么深的黑色会让人更舒服,#555,#666都是不错的选择,如果你的字体很细,比如你采用PingFang SCfont-weight: 100,为了让你的网页更清楚,字体颜色不要超过#333

待更新

  • rem
  • 断字处理

扩展资料:

Windows预装字体
MAC OS X预装字体
英文文字排版指南
中英字体搭配
寻找OS X和Windows下相似的字体
计算字体缩放
网页排版统计