如何用css样式设计整个网站字体

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用css样式设计整个网站字体相关的知识,希望对你有一定的参考价值。

网站字体分为两种类型,一种是默认字体,一种是外部字体。

    默认字体

  如果整个网页都要弄成宋体的话就将body定义为宋体即可,即在样式表中加入:bodyfont-family:"宋体",如果只要一部分为宋体,那将那一部分的层的字体样式定义为宋体就行了。

  默认的字体有宋体、楷体、黑体、新宋体、仿宋等。

    外部字体

样式表中嵌入外部字体,用@font-face语法。

@font-facefont-family:name;src:<url>;sRules;

<name>:为自定义字体名称

<url>:使用绝对或相对地址指定OpenType字体

<sRules>:样式表定义

如:

@font-face

font-family:YH;

src:url(http://www.xxx.com/xxx.ttf);

然后再设置需要变换字体的样式即可,如:bodyfont-family:YH,字体名称是上述所说自定义好的名称。

参考技术A css样式不是设计,它是对整个网页各种布局跟形态视觉上的控制!
如何控制,当然是通过对应的层定义相应的字体样式!
举个例子!如果整个网页都要弄成宋体的话就将body定义为宋体即可!
即在样式表中加入:bodyfont-family:"宋体",如果只要一部分为宋体,那将那一部分的层的字体样式定义为宋体就行了!

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

最好是使用大多数人的机器上可能有的常见的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,那么,对于普通浏览者来说,这是没什么问题的,但是如果你的网站的浏览者包括老人和视力有问题的人群,那么这个尺寸就太小了,最好提供个他们可以选择页面字体的权利。
参考技术A 考虑到用frontpage制作网页的人较多,同时它对其他网页编辑器的使用者也有一定的借鉴作用,
我们可以用css设置出无数种网页字体,但万变不离其宗,任何的变化都要遵循css的基本语法。因此我们先来了解一下css的基本语法,它是这样子的:HTML 标志 标志属性:属性值;标志属性:属性值;标志属性:属性值;…… 。设置字体时,只要正确的更改字体属性的属性值,就可以达到目的。字体属性共分五种:字族(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size),此外font属性是一个总体属性,可一一指定以上各种属性和属性值。它们的功能与属性值如下:
1、字族(font-family)
功能:通过font-family指定字体类型用于改变HTML标志或元素的字体,你可设置一个可用字体清单。浏览器由前向后选用字体。 其语法为:h1 font-family: 字体类型,字体类型,字体类型 2、字体风格(font-style)
功能:使文本显示为扁斜体或斜体等?属性值:normal-普通、italic-斜体、oblique-偏斜体 语法为:h1font-style:属性值 3、字体变形(font-variant)
功能:使文本中的小写字母显示为字体较小的大写字母,常用于设计特殊的标题。 属性值:normal(普通)和small-caps(小型大写字母) 语法为:h1font-variant:属性值 4、字体加粗(font-weight)
功能:用于设置字体笔划的粗细。本回答被提问者采纳
参考技术B css设置网页字体:利用到css中font 属性,具体设置包括:

font-style:字体样式。

font-variant:设置或检索对象中的文本是否为小型的大写字母。

font-weight:设置字体粗细。

font-size/line-height:字体大小/字体行高。

font-family:规定元素的字体系列。

以上是关于如何用css样式设计整个网站字体的主要内容,如果未能解决你的问题,请参考以下文章

如何用js实现,点击后,改变一个css

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

css 如何用图片改变表单边框的样式(圆角边框,有阴影)

如何用JavaScript去操作HTML元素和CSS样式

css字体样式(Font Style),属性

CSS如何设置文字字体