css如何改变元素的字体

html-css05

css如何改变元素的字体,第1张

设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置。<html><head><style type="text/css">body{font-family : 微软雅黑,宋体font-size : 1emcolor : #f00}</style></head><body ><h1>设置字体的类型、大小、颜色</h1><p> CSS设置字体的类型、大小、颜色</p></body></html>设置字体的类型 1字体的类型通过下面这段代码设置:font-family : 微软雅黑,宋体, 'New York'font-family翻译为中文是“字体家族”,就是告诉浏览器,优先使用哪一种字体,谁排在最前面,就先使用这种字体,这里是“微软雅黑”;2多种字体使用逗号间隔,字体名中带有空格或#、$的,需要加单引号或双引号。3如果操作系统中“微软雅黑”,XP系统中就没有这种字体,那么就会使用“宋体”,如果没有“宋体”,就会再使用系统中默认的字体,不过操作系统中一般都是有“宋体”的,而且,如果没有给网页设置字体类型,网页就会按照操作系统中默认的字体来显示。END设置字体的大小 1字体大小通过下面这段代码设置:font-size : 1emfont-size 翻译为中文是“字体尺寸”,它的单位一般是px(像素)或em(字体高度)。2中国的许多网站的默认字体是12px,而且很多人使用的是IE浏览器,像IE6,用户是不能改变网页字体大小的,而现在主流的浏览器,只需要按住Ctrl后,滚动滑轮就可以放大缩小网页了。3单位em是一种相对的字体高度,一般的浏览器都默认为16px,需要注意的是,em会继承父元素的字体大小。比如设置body字体大小为1em,p的字体大小为0.8em,那么换算为像素,p标签的实际单位是 1 * 0.8 * 16px = 12.8px。不过,为了简化em和px的换算,一般设置body的font-size为62.5%,然后使用em设置其他标签的字体大小,这样,em换算为px只需要乘以10就行了,比如1em = 1 * 62.5% * 16px = 10 px4很多人都推荐使用em作为网页字体单位,有2点好处,不过我的实践告诉我,似乎并不太重要。(1)当对IE6设置了字体更大或更小后,所有字体都可以按照比例放大缩小。不过,使用IE6的人越来越少了,现在主流的浏览器,按住Ctrl,滑动滑轮,就可以放大缩小了。(2) 通过修改body的大小,就能按比例修改所有字体大小,因为body是其他字体的基准。这个一般是先设置body大小,然后设置其他标签大小,此时,若是修改了body的大小,其他标签的大小就会跟着变了。END设置字体颜色设置字体的颜色通过下面的代码:color : #f00color是颜色的意思,color用来设置一个标签的前景色,表现出来也就是元素文本的颜色。它的值,一般都是使用#加16进制的颜色值来表示。

使用@font-face来实现特殊字体的定义,定义时需要设置src和font-family属性

范例如下(其中,华文行楷只是一个范例,你可以换成任意一个字体):

<style>

@font-face {

font-family: 'myfont'

src: local('华文行楷'), url('STXINGKA.ttf') format('truetype')

}

.con {

font-family: 'myfont'

font-size: 44px

}

</style>

<div class="con">《HTML5布局之路》</div>

<div>h5course</div>

显示效果:

只有类名为con的div设置了特殊字体

PS:url当中的是你字体文件的路径,假如是放在font文件夹下的某个字体,而你的html文件与font文件夹同级,那么路径就应该是“font/STXINGKA.ttf”。

如果你想你网站上的文字看起来更加不一样,就必须要给网页中的标题、段落和其他页面元素应用不同的字体。你可以用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字体:它经常用于显示计算机代码,它每个字母都是等宽的。