css字体样式
为了更好的使用CSS的样式,有必要对样式的命名规律、分类进行总结,这样才能更好的查询、使用样式。前面在讲解到一些样式比如字体、背景、边框都是根据当前课程是否用得到, 没有系统总结,随着课程的推进有必要进行系统的总结。
字体属性 | 含义 | 值 | 默认值 |
font-size | 字体大小 | 1.数字方式16px、100%。2.表示大小的单词xx-small、large等 | 16px/medium |
font-weight | 字体粗细 | 1.数字方式100、200等。2.表示大小的单词normal等 | 400/normal |
font-family | 字体 | 比如"宋体"、Times New Roman | |
font-style | 字体是否倾斜 | italic表示斜体,normal表示正常 | normal(正常) |
字体大小font-size
字体大小定义方式有绝对定义和相对定义两种方式,使用像素作为单位就是绝对像素,显示器一个像素的边长符合显示器行业标准,具体大小也不必关心,使用 百分比就是相对定义的方式,一个元素定义font-size:200%就是一它的父元素为基准,字体放大两倍,如果父元素没有定义字体尺寸,那么就以浏览器默认的参考尺寸为准, 注意不是浏览器默认的字体显示尺寸,不同的浏览器有差异,多数都是以12px为基准。有些常用的字体大小,使用文字的形式表达,比如medium表示16px,xx-large表示 32px。
xx-small | x-small | small | medium | large | x-large | xx-large |
道 | 道 | 道 | 道 | 道 | 道 | 道 |
9px | 10px | 13px | 16px | 19px | 24px | 32px |
道 | 道 | 道 | 道 | 道 | 道 | 道 |
56.25% | 62.5% | 81.25% | 81.25% | 100% | 150% | 200% |
道 | 道 | 道 | 道 | 道 | 道 | 道 |
字体大小定义方式有绝对定义和相对定义两种方式,使用像素作为单位就是绝对像素,显示器一个像素的边长符合显示器行业标准,具体大小也不必关心,使用 百分比就是相对定义的方式,一个元素定义font-size:200%就是一它的父元素为基准,字体放大两倍,如果父元素没有定义字体尺寸,那么就以浏览器默认的参考尺寸为准, 注意不是浏览器默认的字体显示尺寸,不同的浏览器有差异,多数都是以12px为基准。有些常用的字体大小,使用文字的形式表达,比如medium表示16px,xx-large表示 32px。
实际工作中如何定义字体尺寸才是大家关心的问题,使用像素px的方式定义字体的特点是灵活,可以满足各种尺寸需求,满足个性需求。就像光的颜色可以使用十六进制的 形式描述,也可以使用生活化的语言红色red,绿色green去描述,光学、图形学等技术领域的可能更倾向于选择十六进制,平面设计、服装设计等艺术类的工作可能更倾向于 每一种颜色起一个名字去描述。对于物理学一个原子就是一个原子,但从化学的角度看,每一类原子都要有一个名字,用化学元素周期表描述。CSS和HTML的标准是技术和艺术的桥梁, 如果你偏向页面的视觉效果设计,那么你肯定会有几种常用的字体尺寸,既然常用那就没必要使用数字的方式描述,可以用一系列英文单词描述一组大小递变的字体,比如使用单词medium代替 16px,这也是浏览器p元素默认的值,使用xx-large代替32px,大于32px的不太常用,就没必要使用一个专门的词描述,需要多大,自定义即可。
元素默认字体
浏览器会根据不同元素的用途默认不同尺寸的字体,比如p元素默认字体大小16px,标题h2默认字体19px,不同浏览器有微小差异,不过多数情况下是一致的。
不同的h1~h6标题元素字体默认粗体,为了便于比较大小,设为正常粗细
h6 | h5 | h4 | h3 | h2 | h1 |
道 |
道 |
道 |
道 |
道 |
道 |
字体粗细font-weight
相对定义
参考基准是父元素的粗细,有两个值更粗bolder和更细lighter,比如font-weight:bolder表示比父元素的字体更粗,加粗的量是多少,取决于浏览器的默认值。 在不强调字体粗细对比的时候,一般不用。
值 | 含义 |
bolder | 更粗 |
lighter | 更细 |
绝对定义
使用关键字normal表示正常粗细,使用关键字bold表示粗体,除了使用关键字normal和bold的方法,也可使用100、200、300...900总共9个粗细等级。 400相当于normal,700相当于bold。
400 | 700 |
道 | 道 |
normal | bold |
道 | 道 |
<b>与<strong>
使用标签<b>与<strong>包裹文本,从视觉的效果来看也有加粗的效果,不过<strong>的作用是强调文章中的关键词,浏览器默认加粗是为了视觉与语义一致, <b>和CSS样式加粗一样,并没有语义化的意思,定义的是视觉效果,如果不是出于网站推广优化,使用CSS的方式就可以。
字体font-family
<style> p{ font-family: 宋体; } h2{ font-family: Times New Roman; } a{ /*定义多个字体,使用逗号隔开,前一个不支持就测试后一个*/ font-family: Times New Roman,宋体; } </style>
字体font-family定义依赖于操作系统的字库支持,上面为字体font-family引入多个属性值的方法可以防止某种字体客户端操作系统不支持,也可以保证中英文使用自己的字体, 比如Times New Roman不支持中文,当浏览器解析中文的时候就会开始测试Times New Roman后面的字体。
自定义字体
<style> /*@font-face远程加载字体*/ @font-face { /*自定义字体名字*/ font-family: 天朝甲骨文; /*文件下载地址*/ src:url('http://www.yanhuangxueyuan.com/天朝甲骨文.ttf'); /*调用字体加粗*/ font-weight: bold; } @font-face { font-family: 大秦小篆; src:url('http://www.yanhuangxueyuan.com/大秦小篆.ttf'); /*调用字体显示大小24px*/ font-size: 24px; } </style>
现在客户端一般支持多数字体,如果你们公司美工或者设计师想搞个 稀有的字体,而客户端可能不支持,就需要借助@font-face定义,提前把字体库.ttf存到服务器上, 当用户用浏览器打开网站访问的时候,会自动加载到本地,类似图片的自动加载。
.ttf是字体库的格式,使用photoshop、coreldraw都可以导出.ttf格式字体