网页制作中字体使用小结
发布时间：2010-03-10 23:08:44 作者：佚名 
我要评论
我要评论网页制作中字体使用小结，需要的朋友可以参考下。
注意点：
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的技术规范。
学习更多的技巧，瞭解怎样提交你自己的智慧点滴，以及阅读其他的优质小贴士，尽在小贴士索引 。学习更多的技巧，了解怎样提交你自己的智慧点滴，以及阅读其他的优质小贴士，尽在小贴士索引 。
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 Grid 是一种二维布局系统，可以同时控制行和列，相比 Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,这篇文章主要介绍了前端CSS Grid 布局详解,需要的朋2025-04-16
- CSS 中的 padding 和 margin 是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍 padding 和 margin 的概念、区别以及如何在实际项目中使用它们2025-04-07
- will-change 是一个 CSS 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSS will-change 属性详解，感兴趣的朋友一起看看吧2025-04-07
- 本文给大家分享在 CSS 中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧2025-04-07
在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将2025-04-07css中的 vertical-align与line-height作用详解
文章详细介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，感兴趣的朋友跟随小编一起看看吧2025-03-26浅析CSS 中z - index属性的作用及在什么情况下会失效
z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fixed或sticky），本文给大家介绍CSS 中z - index属性的作用2025-03-21- 文章详细介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等2025-03-18
CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)
本文介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示，感兴趣的朋友一起2025-03-10
前端 CSS 动态设置样式：:class、:style 等技巧(推荐)
本文介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式；通过数组语法,可以同时绑定多个类名或样式,此外2025-02-26
最新评论