1.font-size:字体大小

相对长度: 通常使用像素单位:px

注意:谷歌默认浏览器文字大小为16px,但是不同浏览器大小可能字号大小不同,所以通常先给boby一个指定页面文字的大小

css代码:

body {
  font-size: 16px;
}

2.font-family:字体

作用:设置字体

注意:如果指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,就会尝试下一个

           如果都没有,则显示电脑默认字体为准,中文或多个英文单词时要加引号

css代码:

body {
  font-size: 16px;
  font-family: Arial,"Microsoft YaHei","微软雅黑","黑体";
}

Unicode字体:

虽然可以写中文,但在文件编码(UTF-8、GB2312中)不匹配时会产生乱码,所以要使用Unicode字体

举例:

1.宋体——>\5888\4F53

2.新宋体——>\65B0\5B88\4F53

3.黑体——>\9ED1\4F53

4.微软雅黑——>\5FAE\8F6F\96C5\9ED1

3.font-weight:字体粗细

常用属性值:

normal:默认值(不加粗的)

bold:定义粗体(加粗的)

100-900:400等同于normal,700等同于bold

css代码:

.title {
  font-weight: 700;
}

特殊用法:粗体不加粗

ios和安卓网页上使用的字体css优化 字体的css代码_ios和安卓网页上使用的字体css优化

css代码:

h1 {
  font-weight: normal;
}

效果:

ios和安卓网页上使用的字体css优化 字体的css代码_十六进制_02

4.font-style:字体风格

字体倾斜

css代码:

h1 {
  font-weight: normal;
  font-style: italic;
}

样例:

ios和安卓网页上使用的字体css优化 字体的css代码_ios和安卓网页上使用的字体css优化_03

5.font综合写法:

顺序为:(严格遵照这个顺序,用空格隔开,字号和字体不可缺少,必须写)

font: font-style font-weight font-size/line-height font-family;

.title {
  font: italic 700 20px "微软雅黑";
}

6.color文本颜色:

作用:用于定义文本的颜色

通常使用十六进制写法

举例说明:rrggbb(red、green、blue)

                  #ff0000(红色)

                  #00ff00(绿色)

                  #0000ff(蓝色)

通常使用取色器取色即可知十六进制写法

另:#000000 可简写为#000(两两相同,可以合并简写)

       #ff1122    可简写为#f12

7.text-align文本水平对齐方式:

作用:用于设置文本内容的水平对齐,相当于html中的align对齐属性

属性值:

1.left 左对齐

2.right 右对齐

3.center 居中对齐

8.line-height:行间距

作用:用于设置行间距,即行与行之间的距离

注意:一般情况下,行距比字号大7,8像素左右就可以了

body {
  line-height:24px;
}

9.text-indent:首行缩进

作用:用于设置首行文本的缩进

属性值:

其属性值可为不同单位的数值、em字符宽度的倍数,2em则为首行缩进2个字的距离

10.text-decoration:文本的装饰

作用:通常用于修改链接的装饰效果

属性值:

1.none      无装饰 (常用)

2.underline 下划线 (常用)

3.blink       闪烁

4.line-through 贯穿线

5.overline     上划线