网页制作中字体使用小结

所属分类: 网页制作 / CSS 阅读数: 1822
收藏 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的技术规范。

学习更多的技巧,瞭解怎样提交你自己的智慧点滴,以及阅读其他的优质小贴士,尽在小贴士索引 。学习更多的技巧,了解怎样提交你自己的智慧点滴,以及阅读其他的优质小贴士,尽在小贴士索引 。
更多精彩内容其他人还在看

CSS样式分离之再分离达到精简与重用

无论是CSS的分离还是js的分离,其主要作用之一就是精简与重用,CSS本身就代表着精简与重用,CSS样式分离,我一般指的是“以单独的CSS文件将CSS样式分离出来”,此处的重用多针对不同页面的重用,就是说,一个样式文件,可以多个页面使用,这对于一些公共样式的重构是很有
收藏 0 赞 0 分享

CSS属性behavior的语法使用说明

在进行CSS网页布局的时候,我们经遇到刷新要保留表单里内容的时候,习惯的做法使用cookie,但是那样做实在是很麻烦,css中的behavior就为我们很好的解决了这个问题。今天jb51.net就向大家介绍CSS属性behavior的语法
收藏 0 赞 0 分享

网页制作中的水平居中和垂直居中解决方法集合

 在定义网页的CSS样式的时候,我们或许并不怎么用到垂直居中。
收藏 0 赞 0 分享

最常见IE的Bug及其fix修复方法

Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗,让你的开发生产率严重下降。下面是一个教程,告诉你9个IE上最常见的BUG以及如何解决它们。
收藏 0 赞 0 分享

CSS常用浏览器兼容调整小结

用CSS+DIV来写网站代码的好处显而易见,这里不多说了,但由于不同浏览器对CSS的解释不统一,造成不同浏览器下页面错位的现象十分常见……
收藏 0 赞 0 分享

css firefox火狐浏览器下的兼容性问题

css firefox火狐浏览器下的兼容性问题
收藏 0 赞 0 分享

DIV+CSS 浏览器兼容性小结

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!
收藏 0 赞 0 分享

div+css 布局常识 8问

CSSer与其他IT职位一样,在找工作的时候,都会面临着面试官提出的问题,或者给出的试卷。今天jb51.net收集了常见的8条面试题目,希望对您有所帮助。
收藏 0 赞 0 分享

CSS用四种方式实现布局

CSS用四种方式实现布局
收藏 0 赞 0 分享

css 解决表格边框不显示的问题

在 IE6 中,当表格单元格中的数据为空时,边框是不显示的,在IE8中是会显示的,怎样解决这个不兼容的问题呢。
收藏 0 赞 0 分享
查看更多