CSS字体样式属性

css字体样式属性

1、font-size字体大小

        font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以是使用苦厄对长度单位。其中,较为常用的是相对长度单位,推荐使用像素单位px,在实际应用中,绝对长度单位使用较少。

使用方法:p {font-size: 14px};

相对长度单位说明
em相对于当前对象内文本字体的尺寸
px像素(最常用)
绝对长度单位说明
in英寸
cm厘米
mm毫米
pt

 

例1:设置h3标签和ol标签字体大小为16px,p标签字体大小为14px。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		h3 {
			font-size: 16px;
			
		}
        p {
        	font-size: 14px;
        
        }
        ol {
        	font-size: 16px;
        
        }
        
	</style>
</head>
<body>
	<h3 >------彭昱畅-------</h3>
	<ol>
		<li>演艺经历</li>
		<li>社会活动</li>
		<li>人物评价</li>
	</ol>
	<hr />
	<h3 >演艺经历</h3>
	<p>2015年12月,在爱情古装网剧《太子妃升职记》中饰演强公公,迅速被大家熟知。 
2016年1月,加盟湖南卫视《天天向上》以“天天小兄弟”主持的身份登场  ;2月,主演青春偶像养成网络剧《明星志愿》饰演追逐梦想的艺人路风;2月22日,参与湖南卫视元宵喜乐会与太子妃剧组、众明星一起闹元宵  ;3月18日,都市幻想网剧《器灵》首次担任男主  ;5月,参演搜狐出品的自制剧《刺客列传》; 10月23日,首次献唱新曲《你一定》举办生日会及生日写真EP签名会 。
2017年2月,彭昱畅出演现代青春励志剧《浪花一朵朵》,饰演泳队少年明天;7月4日,参与央视电影频道(CCTV-6)首档星素互动电影主题综艺秀《国片大首映》录制;演员的诞生,7月7日,参与湖南卫视盛唐时空联合制作的原创文化探秘类节目《七十二层奇楼》 [;7月28日,与徐璐主演的校园励志片《闪光少女》上映,饰演音乐生李由,并凭借该片提名第20届上海电影节亚洲新人奖最佳男演员奖。  ;9月,出演花明导演电影《完美魔咒》 ;12月,主演都市英雄幻想网络剧《器灵2》播出 。</p>
<hr />
<h3 >社会活动</h3>
<p>2016年4月26日,彭昱畅重现《天天向上》经典桥段,在个人微博中发布“1分钟吃掉8个蛋挞”的助力公益成长计划视频;在正能量善事面前毫无偶像包袱的他希望大家也都能参与到这次有意义的活动中来  。<br />
2016年8月15日,彭昱畅参与时尚芭莎公益活动“画出生命线”  。<br />
2017年3月11日,彭昱畅&徐浩炫舞梦工厂in-music“少年新声”演唱会” 。<br />
2017年6月16日,彭昱畅助阵“为明天,一起善行”体验式公益活动爱心大使  。<br />
2017年8月27日,彭昱畅出席2017粉丝嘉年华盛典,化身DJ用Launchpad演奏了一段炫酷的电子音乐  。<br />
2017年10月25日,彭昱畅在上海长风海洋世界白鲸馆举办了他的23岁生日会,献唱新曲《你一定》<br /></p>
<<h3 >人物评价</h3>

<p>彭昱畅充满青春时尚的气息并拥有可爱的笑容,其呆萌帅气的形象引得粉丝痴迷,彭昱畅不俗的演技,厚积薄发,被磨练的越来越成熟,疯狂吸粉的同时也得到了观众和导演们的认可。在网络剧《器灵》中,彭昱畅饰演二次元少年莫明,为更好驾驭这个角色,他异常努力,在高强度的拍摄状态,只要镜头一对准,就立马满血复活,敬业度满满 。(网易娱乐、搜狐娱乐评价)</p>
<hr />
</body>
</html>

 

 

2、font-family字体

        font-family属性用于设置字体,网页中最常用的字体有宋体、微软雅黑等。

        使用方法:p {font-family:"黑体"};

        可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一种字体,则将继续尝试下一个字体,直到找到合适的字体。

常用技巧:1、现在网页中常用的字体为14px;

                  2、尽量使用偶数的数字字号,IE6等老版本浏览器在设置奇数字体时会出现bug。

                  3、各种字体之间必须用英文状态下的分号隔开。

                   4、中文字体一般需要加英文状态下引号,英文字体一般不需要加引号,当需要设置英文字体时,英文呢字体必须位于中文字体之前。

                 5、如果字体名中包含空格、#、¥等符号,则该字体必须加英文状态下的单引号或双引号。例 font-family:"Times and Roman"。

3、css unicode字体

        在css中设置字体名称,直接写中文是可以的,但是在文件编码(GB2312、UTF-8等)不匹配时会产生乱码错误。

        以下列举两个较为常用字体的英文名和编码(大多数浏览器都会支持宋体和微软雅黑二者之间的一种)。

字体英文名字体编码
宋体simsun\5B58\4F53
微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1

 

4、font-weight字体加粗

字体加粗在html中可用标签和strong标签,但除此之外,还可用css实现,但css是没有语义的。

font-weight用来定义字体的粗细。

取值:normal:正常的字体,相当于数字400;

         bold:粗体,相当于数字700;

        bolder:定义比继承值更重的值

        lighter:定义比继承值更轻的值

       <integer>:用数字表示文本字体的粗细,取值范围:100、200、300.......900

6、font-style字体风格

       font-style用于设置字体风格,如斜体、倾斜和正常字体。

常用属性如下:normal:默认值,浏览器会显示标准的字体样式;

                          itatic:浏览器会显示斜体字体样式;

注:平时很少会给字体设置斜体,更多的是将字体从斜体变为普通模式。

例2:将例1中的h3标签大小为16px,字体为黑体,颜色粉色,字体加粗值700

    p标签大小为14px,字体为黑体,颜色紫色,字体加粗值500,

      ol标签大小为16px,字体为黑体,颜色绿色,字体加粗值500

关键部分代码如下:

<style type="text/css">
		h3 {
			font-size: 16px;
			font-family: "黑体";
			font-weight: 700;	
			color:pink;
		}
        p {
        	font-size: 14px;
        	font-family: "黑体";
        	font-weight: 500;
        	color: purple;
        }
        ol {
        	font-size: 16px;
        	font-family: "黑体";
        	font-weight: 500;
        	color: green;
        }
        
	</style>

处理结果如下图所示:

 

7、font:综合设置字体样式

 font属性用于对字体样式进行综合设置,其基本语法格式如下:

选择器 {font:font-style font-weight font-size/line-heilght font-familg}

注:使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,且各个属性之间以空格隔开;

     其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

例3:使用font综合设置字体样式

h3标签大小为16px,字体为黑体,颜色粉色,字体加粗值700

    p标签大小为14px,字体为黑体,颜色紫色,字体加粗值400,

      ol标签大小为16px,字体为黑体,颜色绿色,字体加粗值400

关键部分代码如下所示:

<style type="text/css">
		h3 {
		   color:pink;
			font:bolder 16px "黑体";
		}
        p {
        	color: purple;
        	font:normal  16px "黑体";
        
        }
        ol {
        	color: green;
        	font:normal 16px "黑体";
        }
        
	</style>

 

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值