建站极客
网页制作 CSS 正文
网页制作中字体使用小结
所属分类:
网页制作 / CSS
阅读数:
1844
收藏 0
赞 0
分享
注意点: 1.黑体的使用:在字体小的时候(一般小于16px),不适合用;不适合加粗;---例子见 中国雅虎-时尚 2.微软雅黑的使用: 注意字体大小 网页设计者中有这麽一种倾向:他们认为小字体能让网页看起来更漂亮,并能提供更多空间给每个网页中的实际内容。网页设计者中有这么一种倾向:他们认为小字体能让网页看起来更漂亮,并能提供更多空间给每个网页中的实际内容。 但这有时会导致字体太小,不便于阅读。但这有时会导致字体太小,不便于阅读。 更加不幸的是,这个问题又随着用于访问网页的平台不同而发生变化,从小萤幕的移动设备到连接在电脑上的投影仪。更加不幸的是,这个问题又随着用于访问网页的平台不同而发生变化,从小萤幕的移动设备到连接在电脑上的投影仪。 甚至在某个特定平台内,字体设置也可能不同。甚至在某个特定平台内,字体设置也可能不同。 这是一个基本的易用性及可访问性问题:一份好的设计应该看起来漂亮,并且 不需要访客手动调整字体大小 。这是一个基本的易用性及可访问性问题:一份好的设计应该看起来漂亮,并且不需要访客手动调整字体大小 。 忘掉<font>,使用CSS忘掉<font>,使用CSS 目前较好的处理网页字体大小设置问题的方法是使用级联样式表(CSS)。目前较好的处理网页字体大小设置问题的方法是使用级联样式表(CSS)。 我们强烈推荐使用该方法来替代HTML 中<font> 标籤的使用,因为CSS 更灵活,更容易维护,同时也节省带宽。我们强烈推荐使用该方法来替代HTML 中<font> 标签的使用,因为CSS 更灵活,更容易维护,同时也节省带宽。 本条小贴士的目的并不在于讨论CSS与<font> 标籤比有什麽好处,如果你想获得此问题的更多详细资讯,请使用你常用的搜索引擎... 我们将着重讨论如何使用CSS技术创建易读性网页。本条小贴士的目的并不在于讨论CSS与<font>标签比有什么好处,如果你想获得此问题的更多详细资讯,请使用你常用的搜索引擎...我们将着重讨论如何使用CSS技术创建易读性网页。 善用CSS 的font 属性善用CSS 的font 属性 下面有一些使用CSS 的font 属性来创建易读的网页时应该遵守的基本规则。下面有一些使用CSS 的font 属性来创建易读的网页时应该遵守的基本规则。 大小:考虑用户的默认字体大小,避免太小的字体大小:考虑用户的默认字体大小,避免太小的字体 1em(或100%)作为网页文档的基本字体大小,等价于用户的默认字体大小。 1em(或100%)作为网页文档的基本字体大小,等价于用户的默认字体大小。 使用这个值作为基本字体大小,并避免使用小于这个值的基本字体大小为佳使用这个值作为基本字体大小,并避免使用小于这个值的基本字体大小为佳 在正文中避免设置em标籤中的字体小于1em ,除非是版权声明或其他协议条款等。在正文中避免设置em标签中的字体小于1em ,除非是版权声明或其他协议条款等。 单位:避免使用绝对长度单位单位:避免使用绝对长度单位 不要使用pt或其他绝对长度单位来定义用于screen 的CSS 中的font-size 。不要使用pt或其他绝对长度单位来定义用于screen的CSS中的font-size 。 他们会根据不同的平台而有所不同,并且不能被用户代理(如流览器)调整大小。他们会根据不同的平台而有所不同,并且不能被用户代理(如流览器)调整大小。 这种单位可以用于固定的并且知道物理属性的media CSS(例如print)。这种单位可以用于固定的并且知道物理属性的media CSS(例如print)。 使用百分比,或(更好一点) em之类的相对长度单位使用百分比,或(更好一点) em之类的相对长度单位 再好一点,如果一个文档已经设置了基本字体大小,在定义该文档中的某个元素时,可以使用绝对大小 ([ xx-small | x-small | small | medium | large | x-large | xx-large ])或相对大小 ([ larger | smaller ])。再好一点,如果一个文档已经设置了基本字体大小,在定义该文档中的某个元素时,可以使用绝对大小 ([ xx-small | x-small | small | medium | large | x-large | xx -large ])或相对大小 ([ larger | smaller ])。 易读的font-family易读的font-family 如果要使用较小的font-size ,可以指定一个带有高度值的易读的font-family (参见CSS2 规范中的font-size-adjust部分关于aspect 值的解释[译者注:aspect 值是该字体的大小与该字体中小写字母x 的高度之比]),这样能使小号的字更容易阅读。如果要使用较小的font-size ,可以指定一个带有高度值的易读的font-family (参见CSS2规范中的font-size-adjust部分关于aspect值的解释[译者注:aspect值是该字体的大小与该字体中小写字母x 的高度之比]),这样能使小号的字更容易阅读。 延伸阅读延伸阅读 Some of the advice here differs from ours. "Corpus 1em, nihil minor" —Bert Bos after Cato. Some of the advice here differs from ours. "Corpus 1em, nihil minor" —Bert Bos after Cato. Fonts in the CSS2 W3C Specification Fonts in the CSS2 W3C Specification What's wrong with the FONT element? by Warren Steel What's wrong with the FONT element? by Warren Steel Size Matters by Todd Fahrner Size Matters by Todd Fahrner Big Type Campaign by Lighthouse International Big Type Campaign by Lighthouse International Making Text Legible: Designing for People with Partial Sight by Aries Arditi Making Text Legible: Designing for People with Partial Sight by Aries Arditi 关于“优质小贴士”关于“优质小贴士” The W3C 优质小贴士是为网页开发者和设计者提供的一些有用的小短文,由W3C 的Quality Assurance Interest Group 负责管理和辑写。 The W3C优质小贴士是为网页开发者和设计者提供的一些有用的小短文,由W3C的Quality Assurance Interest Group负责管理和辑写。 中文版由ZDYX(张杜一雄)维护。中文版由ZDYX(张杜一雄)维护。 虽然这些小贴士都被小组成员认真审查过,但这只是我们向你提供的点滴技巧。虽然这些小贴士都被小组成员认真审查过,但这只是我们向你提供的点滴技巧。 请注意,它们 不能 被认为是W3C 的技术规范。请注意,它们不能被认为是W3C的技术规范。 学习更多的技巧,瞭解怎样提交你自己的智慧点滴,以及阅读其他的优质小贴士,尽在小贴士索引 。学习更多的技巧,了解怎样提交你自己的智慧点滴,以及阅读其他的优质小贴士,尽在小贴士索引 。
Opera中国的WEB标准课程 网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
评论 0
收藏 0
赞 0
分享
CSS样式表渐进增强的基本概念 网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
评论 0
收藏 0
赞 0
分享
简单介绍Web Developer插件制作网页 网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。
Firefox浏览器是
评论 0
收藏 0
赞 0
分享
CSS布局带来的巨大影响:CSS display属性值 网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。
应原书编辑要求,先在文章顶部给出链接:《Everything You
评论 0
收藏 0
赞 0
分享
用div css模拟表格对角线 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之
首先声明:
这只是探讨一种CSS模拟表格对角线的
评论 0
收藏 0
赞 0
分享
IE Firefox在css中的差别 (部分) 1、单位问题
问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外)
解决:写全单位如padding:0px;
2、水平居中
问题:div里的内容,ie默认为center,而ff默认left
解决:mairgin:0px auto;
3、高度问题
评论 0
收藏 0
赞 0
分享
不用js可以实现信息提示效果 [code]
<style>
body { font:verdena; font-size:14px; color:#000 }
h1{ font:verdena; font-size:22px; color:#000 }
h2{ font:verdena;
评论 0
收藏 0
赞 0
分享
CSS解决未知高度的垂直水平居中自适应问题 今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。
从最简单的开始…………
一、如何让一个DIV水平居中?
这个简单不作过多说明!
[code]
<st
评论 0
收藏 0
赞 0
分享
CSS cursor 属性 -- 鼠标指针样式效果 取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
评论 0
收藏 0
赞 0
分享
css 简单区别ie6,ie7,firefox的写法 同一样式里可以这样
[code]
margin:17px; FF
+margin:17px; IE6 IE7
_margin:17px; IE6
[/code]
按这个顺序,刚好区分开三个浏览器
评论 0
收藏 0
赞 0
分享
查看更多