第八章 增加字体和颜色样式
字体系列是什么?
1. Sans-serif字体系列:包括Verdana、Arial Black、Trebuchet Ms、Arial、Geneva等等。sans-serif字体都是没有衬线的字体。与serif字体相比,通常认为sans-serif字体在计算机屏幕上更容易识读。
2. Serif字体系列:包括Times、Times New Roman、Georgia等等字体。serif字体系列包括有衬线的字体(衬线就是字母末端的装饰性小细线)。
3. Monospace字体系列:包括Courier、Courier New、Andale Mono等字体。monospace字体系列中的字体包含固定宽度的字符。例如,一个“i”在水平方向所占的宽度与一个“m”所占的宽度是相同的。这些字体主要用于显示软件代码示例。
4. Cursive字体系列:包含Comic Sans、Apple Chancery等字体。cursive字体包括看似手写的字体,经常会在标题中使用这些字体。
5. Fantasy字体系列:包含Last Ninja、impact字体。fantasy字体包含有某种风格的装饰性字体。
以上字体系列简单了解就好,想了解更多的字体,请自行百度或谷歌。
使用css指定字体系列
看下面的代码示例:
body{
font-family : Verdana,Geneva,Arial,sans-serif;
}
使用font-family属性可以指定多个字体,只需要输入字体名,并用逗号分隔。通常,你指定的font-family,包含一个候选的字体列表,它们都来自同一个字体系列。
浏览器会在用户的计算机中寻找第一种字体,如果没有找到便再寻找第二种字体,以此类推。指定的字体类型数量没有规定,可以是一个、两个或三个,但是一般推荐将最后一个设置为默认的字体系列(就是上面代码中的sans-serif),这样可以保证浏览器没有在用户计算机中找到指定字体时会自动使用一个默认的通用字体。
如果一个字体名中包含多个单词,比如Courier New字体,可以用引号将其引起来:
font-family: "Courier New",Courier;
字体名严格区分大小写。
引入字体
@font-face{ // 规则以@font-face开头
font-family: "EmbleOne"; //与正常规则不同,正常规则会选择一组元素并指定样式,而@font-face规则会建立一个字体,
src: url("输入字体的URL"), //将指定一个font-family名,以便以后使用,通常起的名字与字体名保持一致
url("输入字体的URL");//src属性告诉浏览器在哪里可以得到这个字体。对于浏览器可识别的每一个文件,
//我们要分别指定一个src值。
}
@font-face规则告诉浏览器:要加载由src URL指定的字体文件。浏览器会尝试加载每一个src文件,直到找到它能支持的一个文件。一旦加载,会为这个字体分配font-family属性中指定的名字,在这里就是”Emblema One“。
5. 在css中使用font-family名:
h1{
font-family:"EmbleOne", sans-serif;
}//使用了sans-serif作为备选字体
注意:@font-face并不选择一个元素,利用@font-face规则,可以获取一个Web字体,并为它分配一个font-family名。最前面的@就是一个很好的线索,说明这不是一个普通的css规则。
调整字体大小
body{
font-size: 14px;//指定字母为14像素高
}
h1{
font-size: 150%;//指定字母大小为父元素的150%
}
h2{
font-size: 1.2em;//指定字母大小为父元素的1.2倍
}
还有一种指定字体大小的方式:关键字。可以把一个字体大小指定为xx-small,x-small,small,medium,large,x-large或xxxx-large,浏览器会把这些关键字转换为像素值,它会使用浏览器中定义的默认值来完成这个转换。
body{
font-size:small;//通过关键字指定大小
}
那么到底该如何指定字体大小呢?有一个秘诀,可以在大多数浏览器中得到一致的结果:
1. 选择一个关键字(推荐为small和medium),指定它作为body规则中的字体大小。这相当与页面的默认字体大小。
改变字体的粗细
font-weight:normal; //将字体粗细设置为普通
还有两个相对的font-weight属性:bolder和lighter。使用这两个属性值时,会相对于所有继承的值使文本样式稍粗一些或者稍细一些。这些值很少使用,因为没有多少字体支持粗细程度的微小差别,实际上这两个值通常没有任何效果。
为字体增加风格
font-style : italic;
Web颜色
body{
background-color: silver;
}
用RGB(红绿蓝)指定颜色:
body{
background-color: rgb(80%; 40; 0%);
}
还可以将RGB值指定为0到255之间的一个数值,还是橙色:
body{
background-color: rgb(204, 102, 0);
}
使用十六进制码指定颜色
body{
background-color: #cc6600;
}
如何查找颜色的十六进制编码
文本装饰
em{
text-decoration: line-through;
}//这个规则会使em元素上有一个从文本中间穿过的横线
一次可以设置多个装饰,假如想同时对一个元素加下划线和上划线,可以这样:
em{
text-decoration: underline overline;
}//这个规则使em元素有一个下划线和一个上划线
如果文本继承了你不想要的文本装饰,可以使用”none“来去除装饰:
em{
text-decoration: none;
}//利用这个规则,em元素将没有任何装饰