如何用css设置网页字体[多图]

html-css08

如何用css设置网页字体[多图],第1张

最好是使用大多数人的机器上可能有的常见的truetype字体。

Arial、Times Roman、Courier、Verdana和Century Gothic是常见的字体,中文里面Windows自带宋体、黑体及楷体。

如果你使用不常见的字体,不要忘记为没有此字体的浏览器指定替代的字体。

通过css设置font-family来制定字体集,浏览器可以顺序查找使用你制定的一系列字体,让你的页面看起来还不错。

・装饰性字体组好只用于标题。然后用css的font-family指定缺省字体。

・不要过分地使用字体,在同一页面中不要使用太多不同的字体。

通常使用两种字体就足够了:一种用于标题,一种由于文本。

某些字体组合常常无法工作。例如,不要再同一页面中使用script和斜体字体,不要在同一页面中使用一种以上的装饰性字体。

・尝试使用相同字型的不同浓淡度使页面更有趣。

如果你的页面相当乏味,没有图像,那么尝试设置促体的浓淡度(通过css的font-weight特性),这会使页面更生动。使用不用的浓淡度不仅可以使页面更吸引人,它还是组织信息的最有效的方法之一。

・不要在同一页面中放两种sans serif字体,除非你确实知道在做什么。

如果你要在同一页面中使用两种字体,它们应该来自两种不同的字型类别。

・不同的操作系统及浏览器中pt字会不一样大。

pt(磅)最早是用于印刷的字号,在windows和mac os里面,相同的pt值会对应不同的px(像素)值。唯一可靠的单位,就是px。

・设置字号的时候,要考虑好来你的网站的客人会是什么样的人?

如果你设置了固定的字号,比如12px,那么,对于普通浏览者来说,这是没什么问题的,但是如果你的网站的浏览者包括老人和视力有问题的人群,那么这个尺寸就太小了,最好提供个他们可以选择页面字体的权利。

如果你想你网站上的文字看起来更加不一样,就必须要给网页中的标题、段落和其他页面元素应用不同的字体。你可以用font-family属性在CSS样式里设置字体,如: font-family:Arial但是设置的这种字体,你电脑上必须装有该字体,否则将按原字体样式显示。当然,也可以写上多种字体,当对方浏览你的网站,没有安装第一种字体时,浏览器就会在列表中继续往上搜寻,直到找到有适合的字 体为止,像这样: font-family:Arial,Helvetica,sans-serif在上例中,Web浏览器会先看看是否安装了Arial字体。如果安装了,那么就用Arial字体显示;如果没有安装,浏览器就会继续寻找Helvetica字体;如果还是没有找到,最后它就会指定一种通用的字体--sans-serif。如果字体的名称中包含多个单词时,则必须用双引号(“”)将它们括起来,如: font-family:"Times New Roman",Times,serif以下就介绍几种常用的font-family字体类型组合,每一列的最后都包含一种通用的字体。 1、Serif字体:最适用于冗长的文字信息,因为读者都会觉得这种字体使字母主笔划的结尾处会有一些细小的“足”,能够比较有效地引导人们的视线从一个字母一到到下一个字母,阅读起来感觉更加轻松。serif字体包括:Times,Times New Roman、Georgia。 2、Sans-serif字体:它看起来干净而简洁,所有经常被用在标题上。Sans-serif字体包括:Arial、Helvetica、Verdana和Formata。 3、Monospaced字体:它经常用于显示计算机代码,它每个字母都是等宽的。

可以使用font属性来设置字体,它的参数比较多,可以参考其schema约束来写。

常用的格式是 font: font-style font-weight font-size/line-height  "font-family","font-family"

含义:font: 字体样式 加粗大小 字号/行高 "字体名称1","字体名称2"

如:

/*font:  15px/25px "microsoft Yahei","SimSun"*/   /* 部分属性可采用默认 */

font: oblique 500 15px/25px "microsoft Yahei","SimSun"

就代表 字体是倾斜、加粗值500、字号15/行高25 ,首选字体microsoft yahei(微软雅黑),如果用户电脑没有该字体,则使用SimSun(宋体);

----------------------------------------------------------

如果只是单纯的设置字体,可以使用font-family,如:

font-family: "microsoft yahei","SimSun"