CSS - 字体 ¶

文字颜色
字体
字体大小
字体加粗
字体倾斜
文字左右居中
缩进两个文字
文字间隔

作者：KK
发表日期：2016.1.26

文字颜色 ¶

color属性就是设置字体颜色的,比如body{color:#FDB933;}这样就将页面文字的颜色设置成金黄色了

字体 ¶

font-family属性用于设置字体,比如font-family:"宋体",还可以试下"黑体","行楷","微软雅黑"和"Helvetica Neue"等

可是实际上你可以用什么字体呢?这方面我也没专门研究哦,我的经验就是打开word文档,进入设置字体的菜单中看看有哪些字体,然后把字体的名字抄下来套到网页上测试效果啦

实际上总结几年来的经验,发现一般做网站真的很少人去弄字体,尽管世上有几百种字体,但是也不是每种字体都有人去用

所以一般大家都用宋体,微软雅黑和行楷这些,一些英文的字体也挺受欢迎,这个你可以上网搜索关键字好看的网页字体这样来

然而CSS样式里使用的字体必须是浏览器支持并且电脑上安装了的字体,所以有的字体你不一定拥有,就需要另外下载安装了

比如"微软雅黑"这个字体是Win7系统开始才有的,如果是WindowsXP的话一般是没有的

那么Win7的用户查看网页时浏览器可以用这个字体渲染网页,但是XP的用户查看网页就会显示比较丑的字体了

候选字体 ¶
既然不同的操作系统会有安装不同的字体,那么你设定的字体有时候就不能保证所有用户都能看得到这样的效果.在某些用户看不到这个字体时又怎么办呢?

CSS提供了候选字体的功能,其实font-family属性的值可以是很多个的,比如这样:font-family: 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;

浏览器会优先渲染微软雅黑字体,如果没有,就渲染Helvetica Neue字体,再没有就渲染Helvetica字体...

其中这里也可以看出,字体名称其实可以不用双引号的哦

字体大小 ¶

font-size属性用于设置字体的大小,比如font-size:20px;这样就会以20像素的宽高显示一个文字了,那个px单位也可以换成其它,比如cm这些,不过好少用

字体加粗 ¶

font-weight属性用于控制字体的粗度!

比如font-weight:bold;就是将文字加粗

而其它还有其它值,比如font-weight:800,700,600什么的表示有多粗,没有单位,但这是很少用到的,真要这么微调的时候自己上网搜索资料啦~

顺带一提,HTML标签中也有加粗功能的标签,那就是strong标签和b标签,你试下被加粗的文字和被加粗的文字

字体倾斜 ¶

font-style可以实现斜体字,比如font-style:italic;或者font-style:oblique都行

而HTML标签中有一个叫i的标签也可以让包住的文字变成斜体,比如我倾斜了

文字左右居中 ¶

属性和值:text-align:center

以下让div的文字显示在中间:

<body>
	<div style="background:red; text-align:center;">文字文字</div>
</body>

缩进两个文字 ¶

属性和值:text-indent:2em

下面就是p标签缩进了2个文字的样子:

<p style="text-indent:2em">从前有个人叫小明,他终日无所是事,专找小红玩,可是小红不喜欢跟他玩,于是他就死缠烂打,最后得到了小红的芳心!最后相亲相爱,成为了家喻户晓的人物,所以我们从小就知道有小明和小红这两个人.我们也要对喜欢的妹子死缠烂打,才能成为家喻户晓的人</p>

这里顺便专门讲下em这个单位,因为此前我只是大概略过

所谓2em其实就是2个字的宽度,但实际上2个字有多宽就要看font-size了,所以1个em就是一个font-size文字大小的实际显示宽度

文字间隔 ¶

属性名称:letter-spacing

以下句子中的文字间隔会宽一点:

<p style="letter-spacing:0.2em">从前有个人叫小明,他终日无所是事,专找小红玩,可是小红不喜欢跟他玩,于是他就死缠烂打,最后得到了小红的芳心!最后相亲相爱,成为了家喻户晓的人物,所以我们从小就知道有小明和小红这两个人.我们也要对喜欢的妹子死缠烂打,才能成为家喻户晓的人</p>

间隔0.2em就是一个font-size尺寸的20%宽度咯