深入探讨CSS中字体元素_CSS/HTML

字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所以,了解一点字体的基本知识对于设计来说还是非常重要的。

   中文和英文的最大区别就是中文是方块字,英文是拼音文字,这对字体的处理的影响是巨大的。看看下面的图示就会发现,英文字体里的那些变化在中文字体里都弱化了。

   作为中文的读者,习惯性的接受方块形状做为阅读的单元,其实对于眼睛来说,这是一种容易疲劳的方式,阅读的时候你的视线实际上是跟随整行文字的外形。看看这个例子。
   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个英文字母丰富的多,对于我们来说,我们接受了这个特点,但是设计时 还是有一些问题需要考虑,我不是设计师,如果说的不对,请在下面留言讨论。这些内容在我教授Typography的时候是作为一般原则来提出的。我也告诉 学生一句话:“The purpose of rule is to break the rule.” 设计原则本身就是为了打破原则,这也是所谓的creativity的表现。问题是你需要先知道原则,并且顺从原则进行练习,只有在你熟悉原则之后才有可能 打破原则显现你的创造性,打破原则不意味着原则的缺陷和错误,只是你对这些原则的别出心裁的使用,你打破了一些,同时也对你所破坏的部分做一定的补偿,似 乎很有点哲学的味道。

   我个人以为比较重要的几个原则是(适用于英文的情形):

   字体的选用要考虑该文字的用途,是做标题呢,还是段落文字?
通 常来说 san serif 字体适合作为标题使用,例如 Arial;serif 字体适合作为段落文字使用,例如Time New Roman。对于网页设计来说,有几个字体是我强烈推荐的,verdana, tahoma, georgia。事实上,像 Verdana 这个字体是由世界上顶级的字体设计师花了差不多两年时间设计出来的,Microsoft负责买单, 然后免费提供给用户,这个字体是IE安装的一部分,如果你安装了IE 4以上的版本,你的电脑里就一定有这个字体,所以你不必担心用户是否有这个字体。它的设计考虑了字体在屏幕上显示的可能面对的问题,而且提供了近乎完美的 答案。唯一的麻烦是它的近乎完美造成了我们使用的时候没有了个性,因为每个人都使用它。

   字号的大小?
   论坛里很多讨论,关于pixle 好还是point好? 我就不重复了,在这里我想提出的是字号的大小在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 类似,但不尽相同, 回到上面的图示,x-height 对于每一种字体来说是不同的,ex 是根据字体的 x-height 来定义字体的大小。

   对齐方式?
   最好使用左对齐,尤其要避免使用左右对齐,除非你有一个特殊的设计目的,左对齐时右侧的不对齐正是为了阅读的方便,右侧的变化对你的视力是一个帮助,它借助变化告诉你的眼睛可以换行了。

   行间距?
   行间距取决于字体的大小,一般来说,小的字号需要大一点的行间距来便于阅读,中文字体在网页上如果没有行间距的设定,对于阅读大段文字来说是读者的灾 难,所以适当设定line-height是非常必要的。一般地, line-height 在网页设计中应该是字体大小的1.5倍到2倍。Word 和其它的文本编辑软件里, 一般设定字体的120%作为缺省的行间距。css里的 line- height 设定,是均分后加在每一行的上下,也就是说,如果 line-height 设定为 20px 的话,那么每一行文字的上下各有10px的间距。

   字间距和字符间距?
   很特殊的用途,对中文来说这两者应该是相同的。这个设定的本身就是为了解决某些字体设计上缺陷,来增加文字的可读性。

   每次写专栏的文章都有这种感觉,越写越不知道怎么结尾, 这可能就是随笔方式的弊病吧。请留言讨论,我这个就算是抛砖了。

时间: 2024-12-22 15:57:50

深入探讨CSS中字体元素_CSS/HTML的相关文章

CSS中HTML元素定位Position参数可选值详解

position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 默认值: static 语法: position : static | absolute | fixed | relative 继承性: no 版本: CSS2 JavaScript 语法: object.style.position="absolute" static 元

CSS中的元素定位方法详解

  1.盒模型 盒模型,就是 浏览器为页面中的每个 HTML 元素生成的矩形盒子. 这些盒子们都要按照 可见版式模型(visual formatting model)在页面上排布.可见的页面版式主要由三个属性控制: position 属性. display 属性和 float 属性.其中,position 属性控制页面上元素间的位置关系, display 属性控制元素是堆叠.并排,还是根本不在页面上出现, float 属性提供控制的方式,以便把元素组成成多栏布局. 盒子属性分三组: 边框(bor

css中替换元素和不可替换元素

  1. 替换和不可替换元素  从元素本身的特点来讲,可以分为替换和不可替换元素.  a) 替换元素  替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容.  例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容:又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等.  (x)html中的<img>.<input>.<textarea>.

css中inline-block元素的空白间距

解决办法 第三种方法设置父元素的字体为"0",然后在"inline-block"元素上重置字体需要的大小.  代码如下 复制代码 ul {   list-style: none outside none;   padding: 10px;   background: green;   text-align: center;   font-size: 0px;     } ul li {   display: inline-block;   *display: inl

解决css中inline-block元素之间有空白问题解决办法

 代码如下 复制代码 <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8" />         <style type="text/css">             * {                 margin: 0;                 padding: 0;             }           

详细学习CSS中的网页布局的属性

css|网页 布局(Layout)属性: 在以前的HTML里,元素的位置只能靠元素的依次排列觉得,而在CSS里你可以更精确的定位元素.Netscape曾提出过Layer标记,它对于精确布局很有好处,但是并没有被W3C承认,W3C在CSS提出了类似于Layer标记的功能. position属性: position属性用来决定元素的位置类型,详见属性: 属性名称: 'position'属性值: absolute | relative | static初始值: static适合对象: 所有元素是否继承

CSS中div高度内容垂直方向居中方法总结

让div中的内容垂直居中,无非有以下几种方法,等我一一列举:  一.行高(line-height)法  如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:   代码如下 复制代码 p { height:30px; line-height:30px; width:100px; overflow:hidden; }   这段代码可以达到让文字在段落中垂直居中的效果.  二.内边距(padding)法  另一种方法和行高法很相似,它同样适合一行或几行文

举例详解CSS中的字体尺寸设置

  常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的固定值,即是说它们一旦设定,就不会因为其他元素的字体尺寸变化而变化. 相对单位没有一个固定的度量值,而是由父元素尺寸来决定的相对值,它们的尺寸会根据与其相关的元素改变而改变. 下面是对这些单位的一个简单整理: 这里主要关注这几个单位:px.pt.%.em.rem和vw. 它们之间有什么区别? 从

CSS中的滑动门技术_CSS/HTML

作者:nobita 2005-5-8 9:39:31ISSN: 1534-0295. 20 October 2003 – Issue No. 160 原文作者:Douglas Bowman 原文出自:A List Apart 中文翻译:54player.com nobita 版权说明:本文中文翻译版权归译者54player.com nobita所有.需要转载发表的,请先与作者联系 在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果.根