runsly html+css教程 2023-05-25

CSS3–如何给文字增加字体和颜色样式

这一章能够让你网页中的文字变得更漂亮

关于文字的一些属性

font-family：文字字体
font-size:文字大小
color:文字颜色
font-weight:文字粗细
text-decoration:文本的更多风格

font-family(字体系列)

一共有五个系列：sans-serif（无衬线）、serif（有衬线）、monospace（等宽）、cursive（草书。。。这是本意）、fantasy（幻想？）看右图

在CSS中font-family怎么工作

body {
	font-family: Verdana, Geneva, Arial, sans-serif;
}

在客户的计算机中查找有没有Verdana，如果有就用Verdana显示文字，如果没有，就查找有没有Geneva，如果还没有就查找Arial，如果还是没有就找找客户机中有没有sans-serif的字体（一般每一个计算机都有sans-serif的字体的，注意：sans-serif不是一个特定的字体）
如果那个字体名是含有空格的，可以把那个名字两边加上引号，像这样：font-family:”Courier New”, Courier;

如果我真的很希望用户可以使用我指定的字体，而我不知道用户有没有这个字体

Web字体登场！

使用方法

找到一个字体文件：后缀名有woff、svg、eot、otf、ttf
将这个字体放在web上，可以使用Google的字体托管服务，这个是免费的
在CSS中增加@font-face属性
```
@font-face {
	font-family:"Emblema One";
	src:url("www.某网站.com");
}/*那个网址就是字体URL */
```
这个时候就相当于在用户机上创建了名为Emblema One的字体了
像本地字体一样使用，注意使用字体的地方要在@font-family之后

这样做的缺点是加载字体会花费一点时间，所以客户第一次访问你的网站而他又没有这个字体就会花一点时间

调节字体大小

有三种字体单位：px(像素)、%、em（就是倍数，em=%除以100）

h1 {
	font-size:220%;
}

还有一种指定字体大小的方法——关键字（xx-small、x-small、small、medium、large、x-large、xx-large）
每一个关键字所表示的大小都不一定的，这个和客户端有关系

那么，我到底应该怎么指定文字的大小呢

首先，可以通过关键字先定义好<body>的文字大小，通过关键字可以得到客户机那边默认的大小，这个一般的他那边常用的大小
之后，使用百分数或em，可以相对于<body>的文字大小来调整其他文字的大小（比如说一级标题），这里不建议使用px像素表示
字体大小，虽然这样你能够准确的决定文字的大小但是在老版本的IE浏览器中将会不支持缩放

改变字体粗细

有五个关键字的大小，分别是：bold（粗体）、bolder（更粗一点）、inherit（继承上一级的粗细）、lighter（细一点）、normal（普通）

还有一种把font-weight设置成100到900之间的一个数（100的倍数）

为字体增加风格

有四种：inherit（继承老爸）、italic（斜体）、normal（普通）、oblique（倾斜的）
italic和oblique的区别在于，前者是使用这个字体的斜体，显示方式是在字体文件中的，后者是直接把正正的字弄斜了。。。不过好像也差不多

颜色

Demo设置<body>的颜色

body {
	background-color:red;
	background-color:rgb(80%, 40%, 0%);
	background-color:rgb(204, 102, 0);
	background-color:#66ccff;
}

这是四种设置颜色的方法，第一种是关键字，这个一般是小学生在用的吧，支持的颜色不多
第二种是使用rgb（red、green、blue）百分比，那些百分比意思是依次是红/绿/蓝的量（怎么说呢，越大就越含有这个颜色）
第三种和第二种相似，只不过从0%~100%改成了0~255
最后一种是十六进制码，意思是：

前两个代表红的十六进制、中间两个是绿的、最后两个是蓝的
把十六进制转成10机制就变成了第三种设置颜色的方法了