CSS控制字体效果的注意事项

发布时间:2019-08-26编辑:脚本学堂
网页中最经典最直接的信息传递方式就是文字,因此了解字体的基本知识对于设计来说还是非常重要的,大家一定要好好看看本篇文章。

中文和英文的最大区别就是中文是方块字,英文是拼音文字,这对字体的处理的影响是巨大的。
中文的读者,习惯性的接受方块形状做为阅读的单元,这对于眼睛来说,这是一种容易疲劳的方式,阅读的时候你的视线实际上是跟随整行文字的外形。看看这个例子。
 

复制代码 代码示例:
NOW I'VE TRIED TO TALK TO YOU AND MAKE YOU UNDERSTAND
 Now I've tried to talk to you and make you understand

哪一行容易阅读呢?
第一行和中文的情形有些类似,不同的是,每个中文单字就好比一幅画,其变化要比26个英文字母丰富的多,对于我们来说,我们接受了这个特点。
我个人以为比较重要的适用于英文的几个原则如下。
 一、字体的用途
字体的选用要考虑该文字的用途,是做标题呢,还是段落文字?
通常来说 san serif 字体适合作为标题使用,例如 Arial;serif 字体适合作为段落文字使用,例如Time New Roman。对于网页设计来说,有几个字体是我强烈推荐的
,verdana, tahoma, georgia。事实上,像 Verdana 这个字体是由世界上顶级的字体设计师花了差不多两年时间设计出来的,Microsoft负责买单, 然后免费提供给用户
,这个字体是IE安装的一部分,如果你安装了IE 4以上的版本,你的电脑里就一定有这个字体,所以你不必担心用户是否有这个字体。它的设计考虑了字体在屏幕上显示的可
能面对的问题,而且提供了近乎完美的答案。唯一的麻烦是它的近乎完美造成了我们使用的时候没有了个性,因为每个人都使用它。二、字号的大小
 这里我想提出的是字号的大小在CSS里,有很多不同的单位,大致上有三类,
   绝对大小:mm, cm, in, pt, pc
  相对大小:em, ex
  相对于设备:px
可能要多说几句的是 em 和 ex,em 在 css 里代表就是字体字号的大小,例如对于12 pt的字体来说, 1 em 就等于12 pt 范例:
 

复制代码 代码示例:
 p {
    font-size: 10pt;
    text-indent: 1em
  }

可以用text-indent: 10pt来实现同样的效果啊,但那只是在理想的情形下,如果用户觉得他的浏览器设置字体大小为14pt更好的时候,你所设计的比例就失去了,所以相对
尺寸对于网页的可伸缩性设计是非常有利的。
ex 和 em 类似,但不尽相同,ex 是根据字体的 x-height 来定义字体的大小。