CSS字体

最新推荐文章于 2021-04-27 23:31:27 发布

溯琳

最新推荐文章于 2021-04-27 23:31:27 发布

阅读量105

点赞数 2

分类专栏： web 文章标签： css html

本文链接：https://blog.csdn.net/m0_56787796/article/details/115528684

版权

web 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

CSS字体

字体系列
字体大小
字体粗细
字体样式
复合属性

字体系列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>字体系列</title>
		<style type="text/css">
			p {
				font-family: 楷体;
			}
			h1 {
				font-family: "microsoft yahei",楷体,宋体;
			}
			/* 
			 font-family:可以跟多种字体，按照顺序如果用户没有第一种字体则会显示第二种字体，
			 若都没有则显示系统默认字体。
			 1.各种字体之间必须用英文状态下的逗号隔开
			 2.如果字体是由多个单词加空格组成，应加引号
			 3.尽量使用默认字体，保证在任何用户的游览器中都可以正常显示
			 */   
		</style>
	</head>
	<body>
		<h1>溯琳</h1>
		<p>微软雅黑</p>
	</body>
</html>

字体系列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字体大小</title>
		<style type="text/css">
			.a {
				font-size: 20px;
			}
			.b {
				font-size: 40px;
			}
			/* 1.谷歌游览器默认的文字大小为16px
			 2.不同的浏览器默认字号不一样，所以要给一个明确的大小
			 3.给body添加文字大小效果可以控制整个页面的大小*/
		</style>
	</head>
	<body>
		<p class="a">溯琳真帅</p>
		<p class="b">溯琳真帅</p>
	</body>
</html>

字体大小

字体粗细

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字体粗细</title>
		<style type="text/css">
			.a {
				font-weight: normal;
			}
			.b {
				font-weight: bold;
			}
			.c {
				font-weight: 100;
			}
			/* p { font-weight: normal | bold | bolder | lighter | number ;} 
			normal 默认粗细          bold 定义粗体
			number 100|200|300|400|500|600|700|800|900
			       400 = normal      700 = bold*/
		</style>
	</head>
	<body>
		<p class="a">众所周知</p>
		<p class="b">溯琳</p>
		<p class="c">很帅</p>
	</body>
</html>

字体粗细

字体样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字体样式</title>
		<style type="text/css">
			p {
				font-style: italic;
			}
			/* normal 默认值，浏览器会显示标准的字体样式
			 italic 斜体样式*/
		</style>
	</head>
	<body>
		<p>溯琳真帅</p>
	</body>
</html>

字体样式

复合属性

         复合属性:
		  font: font-style font-weight font-size/line-height font-family;
		  不可以更换顺序
		  属性之间用空格隔开
		  部分属性可以省略，但font-size和font-family属性必须保留。

溯琳

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS字体

CSS字体字体系列字体大小字体粗细字体样式复合属性字体系列<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>字体系列</title> <style type="text/css"> p { font-family: 楷体; } h1 { font-family: "microsoft yahei",楷
复制链接

扫一扫

专栏目录