【原创】HTML&CSS学习笔记（13） ----CSS里关于字体 font 相关的知识

一 css里的字体设置

1.1 设置字体的例子

{color:

Font-family:

Font-size:

Font-weight: bold  lighter normal bloder

Font-style:

}

 

1.2 设置多种字体的例子，有优先级

Font-family: verdana,Geneva,arial,san-serif,”times new roman”;

这其实是一个字体优先列表

主要是不同的电脑，不同浏览器支持的机型不同

 

 

二 字体系列和字体 

2.1 字体系列类型font-family

每个新还有许多字体

Serif: 装饰字体，印刷字体，勾边，衬线较多

San-serif: 计算机字体

Mono space：打字机字体，因为打印机的磨具宽度是固定的

Cursive：手写字体

Fantasy：装饰性字体

 

2.2 字体类型

如：times new roman

 

2.3 字体文件后缀类型

Woff

Web open font format

Web开放字体

这种字体托管服务器在google上免费？

Web字体，是可以直接浏览器下载都支持？可以标准化？？

字体后缀

最好用woff，保底用ttf

.ttf

.otf

.eot

.svg

.woff

 

三  字体颜色

关键字：color 而不是 text-color

因为color实际是控制着文字和 边框的颜色

Border-color 可以改变color颜色

 

设置字体颜色方法：

• 关键字                         color:blue; 只有16种关键字颜色
• 颜色代码，16进制      color:#ffffff;
• rgb 百分比                  Color:rgb(80%,50%,0%);
• rgb 固定数值               Color:rgb(100,100,100);
• rgba 百分比                Color:rgba();
• rgba 固定数值             Color:rgba();

 

四 CSS里的自定义字体

• 这个要到CSS最前面，body之前
• @font-face 获取一个web字体，并且命名
• Web字体不支持移动设备

例子

@font-face{

Font-family:””;

Src:url(“”);url(“”);

}

Boby{}

 

五 字体大小（实际是字体高度）

字体大小 font-size

字体宽度 font-weight

 

font-size设置方法有很多种

• 具体像素大小-----------------Font-size:14px;
• 关键字定义大小--------------Font-size:small;
•            如 small medium large x-large xx-large
• 相对大小---
•           Font-size:150%  相对父元素的大小
•           Font-size:1.2em  也是相对父元素的大小

例子

Font-size:15px

Font-size:small

关键字

 

字体大小设置方法

像素写死大小，显示格式控制很好，永远都是固定效果，但是非常不灵活，浏览器变化而他不变

好方法 body里指定small其他都相对他指定

Body{font-size:small;}

H1{font-size:150%;}

H2{font-size:100%;}

这样页面将整体的缩放大小

先定义body的默认字体大小

一般情况下，不改变的话，默认body大小为16像素

如果这么写

Body{font-size:90%;}  那实际是默认大小的90%