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

程序员文章站 2022-04-16 22:23:16

...

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

关于文字的一些属性

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

font-family(字体系列)

一共有五个系列：sans-serif（无衬线）、serif（有衬线）、monospace（等宽）、cursive（草书。。。这是本意）、fantasy（幻想？）看右图 CSS3--如何给文字增加字体和颜色样式

在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机制就变成了第三种设置颜色的方法了

对于文本和背景，要使用对比度比较大的颜色，这样可读性才好

文本装饰（text-decoration）

不多说，直接看效果：blink inherit line-through none overline underline

BULLET POINTS

CSS提供了很多属性对字体的外观加以控制，包括font-family、font-weight、font-size、font-style等
font-family是一组有共同特征的字体
用于Web的字体系列包括serif、sans-serif、monospace、cursive、fantasy。serif和sans-serif最为常用
访问者在你的web页面上看到的字体取决于他们自己的计算机上安装了哪些字体，除非你使用web字体
在font-family CSS属性中指定候选字体是一个好主意，以防用户没有安装你的首选字体
最后一个字体要为一个通用字体，如serif或sans-serif，这样一来，如果找不到其他字体，浏览器可以替换适当的字体
如果你要使用某种字体，而默认情况下用户可能没有安装这种字体，你就可以使用@font-face规则
字体大小通常是关键字、像素px、百分比、em指定
如果使用像素来指定字体大小，就是在告诉浏览器字母高度是多少像素
em和%是相对字体大小，所以使用em和%指定字体大小时，就意味着字体大小要相对于其父元素的字体大小来确定
使用相对字体大小可以让你的页面更可维护
在body规则中使用字体大小关键字来设置基本的字体大小，这样如果用户希望文本更大或更小，所有浏览器就能按比例缩放字体大小了
可以使用font-weight CSS属性设置文本为粗体
font-style属性用于创建斜体或倾斜文本。斜体或倾斜文本是倾斜的
web颜色是混合不同数量的红、绿、蓝色得到的
如果混合红色100%，绿色100%，蓝色100%就可以得到白色，全部为0%就是黑色
CSS中有16个基本颜色，及150多个拓展颜色
可以使用红、绿、蓝百分比指定你想要的颜色，也可以使用数值（0~255），或者16进制码
要找到你想要的颜色的十六进制码可以使用图片编辑应用的颜色选择工具
表示颜色的十六进制码有6位，每一位取指为0~F，前两个表示红色的数量、中间两个是绿色的、最后两个是蓝色的
可以使用text-decoration属性为为本创建一个下划线。有下划线的文档通常会被用户误以为是链接文本，所以要谨慎使用这个属性

以上就是CSS3--如何给文字增加字体和颜色样式的详细内容，更多请关注其它相关文章！