• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 网页制作中字体使用小结

网页制作中字体使用小结

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含网页,字体等相关知识,佚名 希望在学习及工作中可以帮助到您
注意点:

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的技术规范。

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

您可能想查找下面的文章:

  • 在网页标题栏上和收藏夹显示网站logo的实现方法
  • 学习DIV+CSS网页布局之一列布局
  • 网页切图的CSS和布局经验与要点
  • 响应式网页设计的快速教程(适合个人站点)
  • css3使网页、图片变成灰色兼容大多数浏览器
  • 任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
  • css网站布局实录学习笔记第三部分网页布局与定位
  • 常用的网页布局方法单侧固定另一侧适应充满
  • 网页布局之响应式设计简明指南
  • css制作网页中的虚线(border属性的使用方法)

相关文章

  • 2017-08-06将样式表放在页面顶部
  • 2017-08-06让多个div在同一行显示的样式及html代码
  • 2017-08-06HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
  • 2017-08-06CSS文本如何折行介绍
  • 2017-08-06firefox下有滚动条时页面抖动问题的解决方法
  • 2017-08-06使用CSS3的appearance属性改变任何元素的浏览器默认风格
  • 2017-08-06写html时,经常用到tab结构
  • 2017-08-06基于CSS制作天蓝色导航菜单
  • 2017-08-06css3绘制天猫logo实现代码
  • 2017-08-06CSS 网页布局中的图文列表实现代码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 让多个div在同一行显示的样式及html代码
    • firefox中div重叠覆盖之前ul的两种解决方法
    • 纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)
    • CSS中的before和:after伪元素使用详解
    • 设置层的漂移的简单实现方法
    • 用hover配合(纯css)position实现网页动态展示效果
    • CSS margin 属性定义边外补白
    • 纯css3显示隐藏一个div特效的具体实现
    • 表单文本框尺寸调整与按钮对齐问题(分成了两行)
    • 纯css3无js实现的Android Logo(有简单动画)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有