爱站程序员基地css字体属性
css fonts(字体) 属性用于定义字体系列,大小,粗细,样式(如斜体)
1.字体系列
css用font-family属性来定义文本的字体系列.
<html><head><!--！+tab键生成基本格式 只写针对知识点的写法--><title> 练习</title><style>h2{font-family: \'微软雅黑\';}</style</head><body><h2>练习</h2><p> 字体部分</p><p> 字体部分</p></body></html>
出现多个字体时用英文的’,’,来分隔,如果你用英文(比如微软雅黑 ‘Microsoft YaHei’)中间有空格的,一般都用单引号,多个单词组成的.
尽量使用系统默认字体,保证可以显示.按照顺序 优先级递减 (菊花链式查询…)
直接也可以在body里面
2.字体大小
css 使用font-size
<html><head><!--！+tab键生成基本格式 只写针对知识点的写法--><title> 练习</title><style>.font {font-size: 19px;}</style</head><body><h2>练习</h2><p class=\"font\"> 字体部分</p><p> 字体部分</p></body></html>
可以给body指定整个页面文字的大小
<html><head><!--！+tab键生成基本格式 只写针对知识点的写法--><title> 练习</title><style>body {font-size: 19px;}</style</head><body><h2>练习</h2><p > 字体部分</p><p> 字体部分</p></body></html>
3 字体粗细css使用font-weight normal(正常字体)bold(加黑) [strong] bolder(ie5+特粗体) lighter(ie5+细体```css<html><head><!--！+tab键生成基本格式 只写针对知识点的写法--><title> 练习</title><style>.bold {font-weight: bold;}</style</head><body><h2>练习</h2><p class=\"bold\"> 字体部分</p><p> 字<strong>体</strong>部分</p></body></html>
实际开发用的是数字
4.文字样式
css用font-style属性设置文本的风格
normal 默认值.italic 斜体
<html><head><!--！+tab键生成基本格式 只写针对知识点的写法--><title> 练习</title><style>p {font-style: 700;}</style</head><body><h2>练习</h2><p > 字体部分</p></body></html>
变正: 注:em,i是斜体标签
<html><head><!--！+tab键生成基本格式 只写针对知识点的写法--><title> 练习</title><style>p {font-style: 700;}em{font-style:normal;}</style</head><body><h2>练习</h2><p > 字体部分</p><em> 字体部分<em></body></html>
5.字体复合属性
练习:div文字边斜体 加粗 自豪设置为16 像素 并且是微软雅黑.
<html><head><!--！+tab键生成基本格式 只写针对知识点的写法--><title> 练习</title><style>div {font-style: italic;font-size: 16px;font-weight: bold;font-family: \'微软雅黑\';}</style</head><body><div> 文字复合属性</div></body></html>
简约代码样式 这个顺序是不能改的,各个属性之间用空格隔开
body{
font: font-style font-weight font-size/line-height font-family ;
}
<html><head><!--！+tab键生成基本格式 只写针对知识点的写法--><title> 练习</title><style>body{font: italic 700 16px \'Microsoft Yahei\' ;}</style</head><body><div> 文字复属性</div></body></html>
不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则font属性将不起作用
