七海的html和css学习笔记（八）_html和css第七章代码-CSDN博客

本文链接：https://blog.csdn.net/z837071844/article/details/79586139

第八章增加字体和颜色样式

字体系列是什么？

前面已经见过font-family属性（用于指定字体），到目前为止总是将这个属性的值指定为“sans-serif”。

每个font-family包含一组有共同特征的字体。共有五个字体系列：sans-serif、serif、monospace、cursive和fantasy。每个字体系列都包括大量字体，所以你在这个页面上看到的只是每个字体系列中很少的几个字体例子。

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;

字体名严格区分大小写。

引入字体

如果你实在想在页面中使用一种字体，而用户的电脑中可能没有，那么你可以使用Web字体（Web Font），向用户的浏览器提供的一种字体。为此，要用到css的一个比较新的特性：@font-face规则。这个规则允许你定义一种字体的名字和位置，然后可以在你的页面中使用，浏览器读取到指定字体时，会向服务器发出索取请求，然后服务器将字体发送给浏览器，就可以使用了。下面将一步一步说明如何使用Web字体。

1. 找到一个字体。可以找到一些提供字体的网站比如 http://www.google.com/webfonts和 http://www.fontsquirrel.com/。

2. @font-face CSS规则基本上已经成为所有现代浏览器的一个标准。但是，存储字体使用的具体格式还不是一个标准。实际上，不同的浏览器对很多不同的格式提供了不同程度的支持，下面是一些常用的格式：

TrueType字体：.ttf

OpenType字体：.otf （TrueType和OpenType字体紧密相关，OpenType建立在TrueType的基础上）

Embedded OpenType字体：.eot （这种字体是OpenType的压缩形式，是微软专用，仅IE提供支持）

SVG字体：.svg （Scalable Vector Graphics是一种通用图像格式，SVG字体使用这种格式表示字符）

Web开发字体格式：.woff （Web开放字体格式建立在TrueType基础之上，已经成为Web字体的标准）

3. 把你的文字放在Web上。你可能想把你的字体文件放在Web上，这样用户的浏览器就可以访问这些字体。或者也可以利用网上的很多在线字体服务，这些服务会为你托管这些文件。

4. 在css中增加@font-face属性将这个规则增加到文件的最上面：

@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规则。

调整字体大小

使用font-size属性调整字体大小的三种方式：

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，浏览器会把这些关键字转换为像素值，它会使用浏览器中定义的默认值来完成这个转换。

各个关键字对应的大小通常有以下关系。每个大小大约比前一个大小大20%，small通常定义为大约12像素。不过，要记住，各个浏览器中这些关键字的定义并不一定相同。如果用户愿意，他们还可能重新给出他们自己的定义。

body{
    font-size:small;//通过关键字指定大小
}

那么到底该如何指定字体大小呢？有一个秘诀，可以在大多数浏览器中得到一致的结果：
1. 选择一个关键字（推荐为small和medium），指定它作为body规则中的字体大小。这相当与页面的默认字体大小。

2. 使用em或百分数，相对于body字体大小指定其他元素的字体大小。

这样做有什么好处呢？是这样的：如果相对于body字体大小定义其他元素的字体大小，那么改变Web页面中的字体大小就会更加容易，只需要改变body字体大小就可以了。比如想重新设计页面，让字体更大一些，如果你的body字体大小值是small，只需要把它改为medium就可以了。

改变字体的粗细

font-weight属性允许你控制文本的粗细。可以将元素的font-weight属性设置为bold，来使用粗体文本；也可以反过来，如果一个元素默认的设置为bold，或者从父元素继承了粗体，可以这样去掉粗体样式：

       font-weight:normal; //将字体粗细设置为普通

还有两个相对的font-weight属性：bolder和lighter。使用这两个属性值时，会相对于所有继承的值使文本样式稍粗一些或者稍细一些。这些值很少使用，因为没有多少字体支持粗细程度的微小差别，实际上这两个值通常没有任何效果。

还可以把font-weight的值设置为100到900之间的一个数，不过同样的，这个特性也未得到字体和浏览器的广泛支持，所以通常并不使用。

为字体增加风格

在css中可以使用font-style属性为文本增加斜体风格：

                                                    font-style : italic;

Web颜色

css提供了很多种指定颜色的方法。可以指定颜色名，或者按RGB（红绿蓝），相对百分比指定颜色，也可以使用一个十六进制码指定颜色。十六进制码是指定Web颜色最常用的方法。但要记住，所有这些指定颜色的方法最终都是告诉浏览器：一个颜色中红、绿、蓝分量分别是多少。

按名指定颜色：

要在css中描述颜色，最直接的方法就是使用颜色名。有16种基本颜色和150种扩展颜色可以采用这种方式指定。假如你希望指定”silver“作为一个body元素的背景色，可以在css中这样写：

body{
     background-color: silver;
}

用RGB（红绿蓝）指定颜色：

还可以用RGB指定一个颜色,比如橙色由红色80%，绿色40%，蓝色0%构成：

body{
     background-color: rgb(80%; 40; 0%);
}

还可以将RGB值指定为0到255之间的一个数值，还是橙色：

body{
     background-color: rgb(204, 102, 0);
}

使用十六进制码指定颜色

body{
     background-color: #cc6600;
}

如何查找颜色的十六进制编码

1. 可以使用photoshop等软件。

2. 使用在线的颜色列表： http://en.wikipedia.org/wiki/Web_colors

文本装饰

文本装饰允许你为文本增加一些装饰性的效果，如下划线、上划线和删除线。要增加一个文本装饰，只需设置元素的text-decoration属性。就像这样：

em{
      text-decoration: line-through;
}//这个规则会使em元素上有一个从文本中间穿过的横线

一次可以设置多个装饰，假如想同时对一个元素加下划线和上划线，可以这样：

em{
     text-decoration: underline overline;
}//这个规则使em元素有一个下划线和一个上划线

如果文本继承了你不想要的文本装饰，可以使用”none“来去除装饰：

em{
     text-decoration: none;
}//利用这个规则，em元素将没有任何装饰