Forever

Do one thing at a time, and do well.

css之字体属性

CSS字体属性常用知识总结:

1.字号设置:

font-size: 合法的尺寸单位;
可以使用所有css尺寸单位,常见单位有:px em rem % ..
当没有设置字号时,浏览会添加默认字号,一般是16px

示例:

<div style=”font-size: 14px;”>西贝博客1</div>
<div style=”font-size: 1em;”>西贝博客2</div>
<div style=”font-size: 1.5rem;”>西贝博客3</div>
<div style=”font-size: 200%;”>西贝博客4</div>

2.字体设置:

font-family:’字体1′,’字体2′;
不同设备,不同系统,默认字体不一样,当前电脑的默认字体是“微软雅黑”
当设置的字体没有生效,会显示默认字体
可以设置多种字体,用“,”隔开。当浏览器不支持第1个字体,就会尝试下一个,直到找到可识别的字体。如果都不能识别,会按设备默认字体输出

示例:

<div style=”font-family:’宋体’ ;”>西贝博客1</div>
<div style=”font-family: ‘黑体’,’宋体’;”>西贝博客2</div>

3.文字颜色:

color: 合法的颜色值 ;–>
合法的颜色值:颜色名 16进制颜色值 RGB颜色值 RGBA颜色值
当文字没有设置颜色时,默认为黑色
颜色名可能不被一些浏览器接受,使用16进制颜色值,或RGB颜色值能被所有浏览器识别并正常显示

示例:

<div>西贝博客</div>
<div style=”color: red ;”>西贝博客1</div>
<div style=”color: #0000FF;”>西贝博客2</div>
<div style=”color: rgb(122,89,223);”>西贝博客3</div>
<div style=”color: rgba(122,89,223,0.8);”>西贝博客4</div>

4.字体粗细:

font-weight: 字体粗度值;

字体粗度值:
1.数字 100-900 没有单位 一般设置成整百 数字越大,字体越粗
2.bold 表示粗体 相当于数字700
3.bolder 表示特粗体 比继承字体粗
4.lighter 表示特细体 比继承字体细
5.normal 表示正常字体粗细 相当于数字400

示例:

<h4 style=”font-weight: normal;”>西贝博客</h4>
<div>西贝博客</div>
<div style=”font-weight: 100;”>西贝博客1</div>
<div style=”font-weight: 400;”>西贝博客2</div>
<div style=”font-weight: 700;”>西贝博客3</div>
<div style=”font-weight: 900;”>西贝博客4</div>
<div style=”font-weight: bold;”>西贝博客5</div>
<div style=”font-weight: bolder;”>西贝博客6</div>
<div style=”font-weight: lighter;”>西贝博客7</div>

5.字体风格

设置文字为倾斜效果
font-style: 样式取值;
样式取值:
1.italic 表示倾斜的字体
2.oblique 表示中间状态的倾斜,偏倾斜字体
3.normal 表示正常的字体,经常用来重置字体样式

示例:

<div>西贝博客</div>
<div style=”font-style: italic;”>西贝博客1</div>
<div style=”font-style: oblique;”>西贝博客2</div>
<i style=”font-style: normal;”>西贝博客3</i>
<br />
<em style=”font-style: normal;”>西贝博客4</em>

6.字体样式重置

两种方式:

一直接在<head></head>两者之间加入代码:

body{font-size: 16px;font-family: “微软雅黑”;color: #222222;}
b{font-weight: normal;}
i{font-style: normal;}

另外一种方式是建立一个Reset.css的文件,文件的内容和上面相同:

body{font-size: 16px;font-family: “微软雅黑”;color: #222222;}
b{font-weight: normal;}
i{font-style: normal;}

然后在<head></head>中间使用link便签引用即可。

<link rel=”stylesheet” type=”text/css” href=”reset.css”/>

点赞

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注