Head First HTML and CSS-增加字体和颜色样式

目录

定制字体大小

5个字体系列

特点

通常

web字体

字体常用格式

碎碎念

@font-face属性

调整字体大小

方法

技巧

注意

改变字体的粗细

为字体增加风格

指定web颜色方法

文本装饰

---

定制字体大小

5个字体系列

1.Sans-serif字体系列（常用）

包括没有衬线的字体，与serif字体相比，通常认为sans-serif字体在计算机屏幕上更容易识读。

2.Serif字体系列

包括有衬线的字体，很多人一看到这种字体就想到新闻报纸的文字排版。

3.Monospace字体系列

包括固定宽度的字符，这些字体主要用于显示软件代码示例。

4.Cursive字体系列

包括看似手写的字体，有时会看到标题中使用这些字体。

5.Fantasy字体系列

包括有某种风格的装饰性字体。

特点

1.serif字体看起来很高雅，很传统；

2.sana-serif字体外观很清晰，可读性好；

3.monospace字体就好像是打字机打出来的；

4.cursive和fantasy字体给人一种有趣或者很有风格的感觉。

通常

指定的font-family包含一个候选字体列表，他们都来自同一个字体列表，最后总是放一个通用的字体列表，e.g.

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

其中，计算机从前往后“扫描”，有就用，没有就下一个，以此类推。

如果一个字体名包含多个单词，只需要在声明中的字体名加上双引号，e.g.

body{
       font-family: "Courier New",Courier;
}

web字体

字体常用格式

1.TrueType字体：.ttf;

2.OpenType字体：.otf;

3.Embedded OpenType字体：.eot;

4.SVG字体：.svg;

5.web开放字体格式(web open font format)：.woff。（推荐）

碎碎念

Truetype和OpenType字体紧密相关，OpenType建立在TrueType基础之上，比TrueType更新。Embedded OpenType是OpenType的一种压缩形式，这种格式是专用的，仅IE提供支持。Scalabe Vector Graphics或SVG是一种通用图像格式，SVG字体使用这种格式表示字符。Web开放字体格式建立在TrueType基础之上，已经发展为Web字体的一个标准，大多数现代化浏览器都对这样的格式提供了很好的支持。

@font-face属性

1.在@font-face属性规则中，我们使用font-family属性为这个字体创建一个任意喜欢的名字，不过通常与字体名一致。

2.src属性告诉浏览器在哪里可以得到这个字体，e.g.

@font-face{
            font-family: "Emblema One";
            src: url("…………"),
                 url("…………");
}

3.TTF和WOFF字体格式在IE8及以前的版本中不可用。

4.认为@font-face是一个内置的CSS规则，同样还有@import和@media：

（1）@import允许导入其他CSS文件（而不是HTML中通过一个<link>链入）；

（2）@media允许创建特定于某些“媒体”类型的CSS规则，如印刷页，桌面屏幕或手机。

调整字体大小

方法

1.像素（px）

（1）是在告诉浏览器字母的高度是多少像素；

（2）px必须紧跟在像素数的后面，之间不能有空格。

2.百分数（%）

（1）会相对于另一个字体大小指出这个字体有多大；

（2）由于font-size是从父元素继承的一个属性，指定一个百分数字体大小时，就是相对于父元素的字体大小；

（3）e.g.

body{
       font-size: 14px;
}
h1{
       font-size: 150%;
}

这里的一级标题大小就是相对于body字体的大小的150%。

3.em

（1）类似于百分数，是一个相对度量单位，指定一个比例因子；

（2）注意不要同<em>元素搞混。

4.关键字

（1）浏览器会把这些关键字转换为像素值，它会使用浏览器中的默认值来完成这个转换；

（2）每个大小大约比前一个大小大20%，small通常定义为12px，从小到大依次为：xx-small,x-small,small,medium,large,x-large,xx-large;

（3）各个浏览器中这些关键字的定义并不相同，用户还可能自己重新定义。

技巧

1.选择一个关键字（推荐small或medium），指定它作为body规则中的字体大小，这相当于页面的默认字体大小；

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

注意

如果使用像素指定字体大小，老版本的Internet Explorer将不支持文本缩放。

大多情况下，默认body字体大小16px，<h1>是其200%，<h2>是其150%，<h3>是其120%，<h4>是其100%，<h5>是其90%，<h6>是其60%。

如果在body规则中指定大小为90%，则是指相对于默认body字体大小的90%。

改变字体的粗细

1.粗体文本：font-weight：bold；

2.如果一个元素默认的设置为bold或者从父元素继承了粗图，可以如下去掉粗体：

h1{
      font-weight: normal;
}

3.两个相对font-weight属性：bolder和lighter。使用这两种属性值时，会相对于所继承的值使得文本样式稍粗一点或稍细一点，但不常用。

4.还可以把font-weight属性设置为100到900之间的一个数（100的倍数），但通常并不使用。

为字体增加风格

1.斜体：font-style：italic；

2.倾斜文本：font-style：oblique；

3.除非可以控制用户使用的字体和浏览器，否则你会发现不论你指定什么风格，结果并不确定，有时会得到italic，有时会得到oblique。

指定web颜色方法

1.按名指定颜色

（1）只需要输入颜色名作为相应的属性值；

（2）CSS中有16种基本颜色，最多定义了大约150种颜色名；

（3）CSS颜色名是不区分大小写的。

2.用红，绿，蓝值指定颜色

（1）用百分数指定分量：

body{
       background-color: rgb(80%,40%,0%);/*橙色*/
}

（2）用0到255之间的一个数值指定分量：

body{
       background-color: rgb(204,102,0);/*橙色*/
}

（3）这里的“rgb”开头，是red，green，blue的缩写。

3.使用十六进制码

（1）十六进制计数系统（hexadecimal)，简写为“hex”；

（2）以“#cc6600”为例，总是以“#”开头，“cc”，“66”，“00”分别代表颜色的红，绿，蓝分量；

（3）如何分解：

a.将十六进制颜色分解为它的三个分量；

b.将每个十六进制数转换为十进制数；

c.确定分量。

4.如何找到web颜色：

（1）使用一个颜色表；

（2）使用类似Photoshop Element的应用。

5.如果十六进制码中每一组分量的两位数字都相同，可以简写，例如“#cc6600”就可以简写为“#c60”。

文本装饰

1.删除线：text-decoration: line-through;

2.下划线：text-decoration: underline;

3.上划线：text-decoration: overline;

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

5.不同规则中的装饰不会累加在一起，所以要得到两个装饰，唯一的办法就是在同一个text-decoration声明中同时指定，e.g.要同时加上划线和下划线：

em{
     text-decoration：underline overline;
}

6.color属性实际上是一个元素的前景色，所以它会控制文本和边框颜色，也可以用border-color属性来为边框指定自己的颜色。、

7.<del>属性：能把HTML中的某些内容标记为要删除的内容，

8.<ins>属性：会标记要插入的内容。