首页
关于我们
网站建设
经典案例
网络推广
技术中心
建站指导
联系我们
网站套餐 Package
最新推荐 Recommended  
  您现在的位置: 天诚世纪 >> 技术中心 >> 网页设计 >> 网页基础 >> 正文
网页文字应用CSS设计的一些技巧中
作者:天诚世纪 更新时间:2009-6-17 14:15:54 来源:天诚世纪
    
在前面这个例子里,所要求的是"用Georgia字体修饰所有文字,如果使用者没有安装Georgia的话,改用Times,如果还没有安装Times的话,就是用预设的serif字体".

  图3显示了示例加上font-family之后的效果.

网页文字应用CSS设计的一些技巧

  图3 以Georgia字体显示的示例效果.

  名称内含空格的字体

  如果像指定名称内含空白的字体(比如说Lucida Grande),就必须以引号包住整个字体名称.

  在下面的例子中,将把Lucida Grande(有名的Macintosh字体)选为希望使用的字体,并且指定Trebuchet MS(有名的Windows字体)作为第二候补,再加上一个通吃的sans-serif.在前面两种字体都没有安装的情况下,取用预设的sans-serif字体.

  body {
font-family: "Lucida Grande", "Trebuchet MS", sans-serif;
line-height: 1.5em;
}

  字距调整(又称作字母间隔)

  字距调整是个在印刷界描述文字间隔的名词.与其同义的CSS属性是letter-spacing.接着,让我们为<h1>标签使用letter-spacing属性,为示例的标题加点料.

  在为<h1>标签应用letter-spacing之后,就能使标题更引人注目,而不必打开图片编辑器开始制作图片文字.

  首先,让我们为letter-spacing属性加上负数值把标题的文字紧缩:

  h1 {
letter-spacing: -2px;
}

  修改成果在图4里能看到.

网页文字应用CSS设计的一些技巧

图4 为<h1>加上负数值得letter-spacing

  或者尝试加上正数的letter-spacing并同时用font-style属性把标题改为斜体:

 h1 {
letter-spacing: 4px;
font-style: italic;
}

  图5是依照上述修改过后的效果,单就文字来讲变得十分引人注目了,不是吗?不使文字间距变动的太夸张是个明智之举,因为这样反而很容易使文字变得难以阅读,一旦内容难以阅读,还有谁会在意它吸不吸引人呢?你说是吧!

网页文字应用CSS设计的一些技巧

  图5 使用正数letter-spacing值,并且应用斜体

  首字大写

  首字大写在印刷界十分常见,这能为段落加上华丽而优雅的效果,而且不必用上图片就能办到这种效果,只用CSS就够了.

  首先,必须为标记源代码加上一个"样式锚点"让我们有办法调用第一段的第一个字母.我们将 "I" 用一组<span>标签包起来并给它指定class=drop,如果我们才能在页面或整个网站里重复使用首字大写效果.

  <p><span class="drop">I</span>f you're painting with latex paints, and the job ...

  在某些完全支持CSS2规范的现代浏览器中,我们可以用:first-letter伪类设定段落首字效果,而不必加上额外的标签,虽然语义上非常棒,不幸的是许多浏览器都不支持这个效果.

  现在我们能完全控制第一段的 "I" 字母了,让我们加上CSS声明,以便把字体放大,同时将它浮动到左侧(这样,其他的文字才不会包围它显示),我们也会加上装饰用的背景,边框.

  .drop {
float: left;
font-size: 400%;
line-height: 1em;
margin: 4px 10px 10px 0;
padding: 4px 10px;
border: 2px solid #ccc;
background: #eee;
}

本文作者:
本文链接:http://www.tc-21.com/ITCenter/200906/20090617141554.html

  • 上一篇文章:
  • 下一篇文章:
  •   更多关于网页基础的新闻
      相关文章
    网页颜色的几种表示方法
    网页文字应用CSS设计的一些技巧上
    网页文字应用CSS设计的一些技巧下
    10条影响CSS渲染速度的写法与建议
    9则css网页制作技巧
    CSS设置滚动条颜色
    常用CSS样式效果汇总
    CSS中的marker-offset