css属性小结之字体

css属性之字体

用font-family定义页面中使用的字体

font-family属性可以创建一个首选字体列表（可以设置候选字体，不只一个），使用字体列表是为了避免用户未安装所设定字体，可以提供候选字体，多个字体间使用逗号隔开。

 font-family:“宋体”，“黑体”，Arial；

拓展-使用Web字体

若某种字体对网站设计很重要，确实必须使用，且用户不一定安装，可以使用web字体：使用@font-face规则，定义一种字体的名字和位置，字体文件可以放在服务器上或使用托管服务。

@font-face{
font-family:”my-font”
src：url（“http://wickedlyesmart.com/hfhtmmlcss/font.woff”）
url（“http://wickedlyesmart.com/hfhtmmlcss/font.ttf”）

}

font-family的值为定义字体的名称，必需定义；

src的值为URL，定义该字体下载的网址，必需定义，可定义多个，浏览器会尝试加载每一个src文件，直到找到它能支持的一个文件（不同浏览器可以识别的字体格式可能不同）；
可选定义有：font- weight，font-style等

font-size属性控制字体大小

使用像素指定字体大小

 body{
 font-size:14px;
 }

使用像素指定字体大小，会明确指出字体有多大，告诉浏览器字母的高是多少像素

使用百分数指定字体大小

用一个百分数指定字体大小时，会相对于另一个字体大小指出这个字体有多大，一般相对于父元素字体的大小。

使用em指定字体的大小

与百分数类似。em也是一个相对度量单位，但不是指定一个百分数，而是一个比例因子。

font-size: 1.2em;/*表示字体的大小比例是1.2*/

使用关键字指定字体大小

关键字可以把一个字体大小指定为xx-small，x-small，small，medium，large，x-large，xx-large。这些关键字前后大小一般相差20%；浏览器会把这些关键字使用浏览器中定义的默认值转换为像素值。

选择指定字体大小的方式

指定字体大小有多种选择，可以使用以下方式：

1. 选择一个关键字（推荐small或medium）指定它作为body规则中的字体大小，相当于页面默认字体大小。
2. 使用em或百分数，相对于body字体大小指定其他元素的字体大小。
   这样设置的好处是当想要调整页面上的字体大小时，每个元素会按比例增大，实现一定程度的自动调整大

font-weight属性控制字体粗细

font- weight属性的值为“bold”和“normal”，对应设置字体为粗体和正常粗细；此外，还可以吧font-weight的值设置为100-900的一个100的倍数

font-weight: bold;
font-weight: normal;
font-weight: 500;

font-style属性控制字体是否倾斜

font-style可以设置字体是否倾斜，属性值可以为：“nornal”，“italic”，“oblique”

• normal：设置文本不倾斜
• italic：设置字体为斜体风格
• oblique：设置倾斜文本，使用较少

关于italic（斜体）和oblique（倾斜文本）

斜体：文本向右倾斜，另外衬线区还有弯曲。

倾斜文本：并不是所有的字体都支持斜体风格，即设置为斜体有时得到的也是倾斜文本；倾斜文本也是倾斜的，不过这种字体不是一组专门设计的倾斜字符而是浏览器将正常文字倾斜。

• 斜体（italic）和倾斜（oblique）风格会使字体看起来时倾斜的，除非控制用户使用的字体和浏览器，否则不论指定那种风格结果并不确定，有时是斜体，有时是倾斜文本。所以完全可以使用斜体（italic），不用户担心它们的差别。

color属性控制字体的颜色

按名字指定颜色

在css中描述颜色最直接的方法就是使用颜色名。所有浏览器都支持的基本颜色名与扩展颜色名共计147种。
例：设置h1标题颜色为silver

h1{
color: silver；
}

使用rgb（red，green，blue）指定字体颜色：

使用红，绿，蓝分量指定一个颜色

color的属性值可以使用红，绿，蓝分量指定一个颜色，如橙色（红色80%，绿色40%，蓝色0%）

color: rgb(80%,40%,0%);

使用红绿蓝参数值指定颜色

rgb中还可以将3个参数设置为0～255之间的一个数值，分别定义了 0 到 255 之间的颜色强度：

color: rgb(204,102,0);

使用十六进制码指定颜色

使用十六进制码指定颜色是最为常见的一种方式；十六进制码以“#”开头，每组2位数字分别代表颜色的红绿蓝分量，前两位表示红色，中间两位绿色，最后两位蓝色；如：#cc6600.

font简写方式

在css中提供了一种font的简写方式：
font：font-style font-weight font-size font-family；

• font-style和font-weight可以交换位置也可以省略，默认值为normal
• font-size和font-family不能交换位置也不可以省略
• 各个属性间使用空格隔开