欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS 字体

程序员文章站 2022-04-23 15:41:56
...

- 文字

  颜色、字体大小、字体、加粗等

- 文本

  行高、对齐方式、文本装饰


文字样式属性:

- 字体: font-family

- 文字大小: font-size

- 文字颜色:color

- 文字粗细: font-weight

- 文字样式: font-style


(1)  font-family 字体属性

定义元素内文字以什么字体来显示

语法:

a. font-family:【字体1】【,字体2】【,...】

     设置了多个字体,只会执行一个字体,若字体1找到,则使用字体1,否则寻找字体2,若有则使用,否则,...,最后都没寻找到,则会使用浏览器默认字体。

	<style type="text/css">
		h1{font-family:"宋体";}
		p{font-family:"微软雅黑","宋体";}
	</style>
b. font-family:具体字体名,字体集

      字体集:

        - Serif

        - Sans-serif

        - Monospace

        - Cursive

        - Fantasy

	<style type="text/css">
		h1{font-family:"宋体";}
		p{font-family:"微软雅黑","宋体",sans-serif;}
	</style>

       不同字体集,有不同的装饰效果。例如:

CSS 字体

(2)font-size

定义元素内文字大小

语法:

font-size:绝对单位|相对单位

绝对单位:

CSS 字体

相对单位:

随着浏览器(默认值)的改变而变化。

- px (像素)

- em 与 % (都是针对父元素进行字体大小设置)

- 比父元素大或小

CSS 字体

	<style type="text/css">
		h1{font-family:"宋体";}
		p{font-family:"微软雅黑","宋体",sans-serif;}
		.em{font-size:2em;}/*占两个字体大小*/
		.em{font-size:150%}
	</style>
</head>

(3) color

定义元素内颜色


(4) font-weight 与  font-style

a. 给文字加粗,可以使用html标签:<b></b>、<strong></strong>。

     css:

          CSS 字体

b. 给文字设置斜体,可以用html标签<em></em>

     css 语法:

       font-style:normal或italic或oblique

      normal 是默认值

      italic 是斜体

      oblique 是倾斜,与斜体展示起来相似


c. 给字体变形 font-variant

    设置元素中文本为小型大写字母(针对英文)

      css 语法:

         font-variant:normal或small-caps


    

相关标签: css 字体