建站极客
网页制作 CSS 正文
网页制作中字体使用小结
所属分类:
网页制作 / CSS
阅读数:
1831
收藏 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盒模型宽和高 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。
#test{margin:10px;padding:10px;width:100px;height:100px;}
评论 0
收藏 0
赞 0
分享
在IE流览器中正确显示PNG透明图片 png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!
但目前IE中对于插入
评论 0
收藏 0
赞 0
分享
CSS教程:DIV底部放置文字 css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
评论 0
收藏 0
赞 0
分享
如何用CSS让文字居于div的底部 这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
评论 0
收藏 0
赞 0
分享
从A页面连接到B页面后并直接把B页面的隐藏层显示 这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
评论 0
收藏 0
赞 0
分享
CSS样式表定义标签li前面样式 定义LI前面的小点样式
view plaincopy to clipboardprint?
语法:
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
评论 0
收藏 0
赞 0
分享
符合标准的div css制作的弹出菜单 本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的.
NO.1最基本的:二级dropdown弹出菜单
<!DOCTYPE html PUB
评论 0
收藏 0
赞 0
分享
CSS实现在文章每段后面加入带连接的隐藏文字 代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
评论 0
收藏 0
赞 0
分享
CSS:浏览器特定选择器介绍 当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。
IE6以下
*html{}
IE 7 以下
*:first-child html {} * html {}
只对IE 7
*:first-child html {}
只对IE 7
评论 0
收藏 0
赞 0
分享
WEB标准学习,认识两种网页声明的含义 即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"ht
评论 0
收藏 0
赞 0
分享
查看更多