建站极客
网页制作 CSS 正文
网页制作中字体使用小结
所属分类:
网页制作 / CSS
阅读数:
1897
收藏 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配合JavaScript做酷的动态页面效果 利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
评论 0
收藏 0
赞 0
分享
WEB标准,Web前端开发工程师必备技术列表 想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:
通过许多实际项目,
评论 0
收藏 0
赞 0
分享
用CSS制作Alpha滤镜测试板 alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
评论 0
收藏 0
赞 0
分享
非常流行的所谓的气泡窗口 普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格.
前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的).
我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制..
先下载Sweet Ti
评论 0
收藏 0
赞 0
分享
CSS教程:li和ul标签用法举例 LI代码的格式化:
A).运用CSS格式化列表符: ul li{
list-style-type:none;
}
B).如果你想将列表符换成图像,则: ul li{
list-style-type:none;
list-style-image: url(/blog/images/
评论 0
收藏 0
赞 0
分享
CSS教程:CSS中的定位(position) 使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。
其实,要想控制好层的绝对定位,只要理解CSS中关于定位
评论 0
收藏 0
赞 0
分享
CSS教程:盒模型(BOX Model) 如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
评论 0
收藏 0
赞 0
分享
无延迟翻滚的图形与CSS混合风格按钮 在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。
相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
评论 0
收藏 0
赞 0
分享
css里expression实现界面对象的批量控制 用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
评论 0
收藏 0
赞 0
分享
CSS教程:水平对齐(text-align) 水平对齐(text-align),用以设定元素内文本的水平对齐方式。
1.语法
text-align具体参数如下:
语法:text-align:left|right|center|justify
说明:设定元素内文本的水平对齐方式。
参数:left:左
评论 0
收藏 0
赞 0
分享
查看更多