CSS属性之字体属性

最新推荐文章于 2024-04-22 13:50:02 发布

「已注销」

最新推荐文章于 2024-04-22 13:50:02 发布

阅读量633

点赞数

分类专栏： CSS学习笔记

本文链接：https://blog.csdn.net/h15882065951/article/details/55806855

版权

CSS学习笔记专栏收录该内容

13 篇文章 3 订阅

订阅专栏

font-family属性

font-family属性指定元素的字体类型。

写法：font-family: "Microsoft YaHei"||黑体;

注：若字体名称包含空格，则需用双引号括起来，如果是在style属性中书写，则用单引号括起来。

常见字体名称：Microsoft YaHei(微软雅黑)，Simsun(宋体)，NSimsun(新宋体)，Simhei(黑体)，FangSong(仿宋)，KaiTi(楷体)等。

某些浏览器的默认字体是微软雅黑。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>字体属性</title>
	<style>
	  
	  #p1 {
	    font-family: "Microsoft YaHei";
	  }
	  #p2 {
	    font-family: 'KaiTi';
	  }
	  #p3 {
	    font-family: 'Simsun';
	  }
	  #p4 {
	    font-family: 'FangSong';
	  }
	
	</style>
  </head>
  <body>
    
	<p id="p5">元素字体(浏览器默认字体)</p>
	<p id="p1">元素字体(微软雅黑)</p>
	<p id="p2">元素字体(楷体)</p>
	<p id="p3">元素字体(黑体)</p>
	<p id="p4">元素字体(仿宋)</p>
	
	 
  </body>
</html>

效果如下：

font-size属性

font-size属性指定字体的大小。

属性值：

xx-small/x-small/small/medium(中等、默认)/large/x-large/xx-large。
smaller,比父元素更小的尺寸。
larger,比父元素更大的尺寸。
length,固定值的大小。
%,基于父元素百分比的值的大小。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>字体属性</title>
	<style>
	  
	  #p1 {
	    font-family: "Microsoft YaHei";
		font-size: xx-small;
	  }
	  #p2 {
	    font-family: 'KaiTi';
		font-size: smaller;
	  }
	  #p3 {
	    font-family: 'Simsun';
		font-size: 50px;
	  }
	  #p4 {
	    font-family: 'FangSong';
		font-size: 125%;
	  }
	
	</style>
  </head>
  <body>
    
	<p id="p5">元素字体(浏览器默认字体)</p>
	<p id="p1">元素字体(微软雅黑)</p>
	<p id="p2">元素字体(楷体)</p>
	<p id="p3">元素字体(黑体)</p>
	<p id="p4">元素字体(仿宋)</p>
	
	 
  </body>
</html>

效果如下：

font-style属性

font-style属性指定字体的样式（如：斜体、倾斜等）。

属性值：

italic,斜体。
oblique，倾斜

一般情况下，italic与oblique没什么区别。

内容与样式分离：在开发过程中，尽量用italic属性替代<i>元素。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>字体属性</title>
	<style>
	  
	  #p1 {
	    font-family: "Microsoft YaHei";
		font-size: xx-small;
		font-syle: normal;
	  }
	  #p2 {
	    font-family: 'KaiTi';
		font-size: smaller;
	  }
	  #p3 {
	    font-family: 'Simsun';
		font-size: 50px;
		font-style: italic;
	  }
	  #p4 {
	    font-family: 'FangSong';
		font-size: 125%;
		font-style: oblique;
	  }
	
	</style>
  </head>
  <body>
    
	<p id="p5">元素字体</p>
	<p id="p1">元素字体(默认)</p>
	<p id="p2">元素字体</p>
	<p id="p3">元素字体(斜体)</p>
	<p id="p4">元素字体(倾斜)</p>
	
	 
  </body>
</html>

效果如下：

font-weight属性

font-weight属性指定字体的粗细。

属性值：

nromal，默认字体。
bold，粗体。
bolder，更粗的字体。
lighter，更细的字体。
100~900,400==normal，700==bold。

注：在开发中，建议用font-weight属性代替<b>元素，使其样式与内容分离。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>字体属性</title>
	<style>
	  
	  #p1 {
	    font-family: "Microsoft YaHei";
		font-size: xx-small;
		font-syle: normal;
		font-weight: lighter;
	  }
	  #p2 {
	    font-family: 'KaiTi';
		font-size: smaller;
		font-weight: bold;
	  }
	  #p3 {
	    font-family: 'Simsun';
		font-size: 50px;
		font-style: italic;
		font-weight: 400;
	  }
	  #p4 {
	    font-family: 'FangSong';
		font-size: 125%;
		font-style: oblique;
		font-weight: 800;
	  }
	
	</style>
  </head>
  <body>
    
	<p id="p5">元素字体</p>
	<p id="p1">元素字体(更细)</p>
	<p id="p2">元素字体(粗体)</p>
	<p id="p3">元素字体(默认)</p>
	<p id="p4">元素字体(800)</p>
	
	 
  </body>
</html>

效果如下：

@font-face属性

@font-face属性指定将字体样式放于服务器端。

书写：

@font-face {

font-family: myFamilyId;

src: url('url');

}

select {

font-family: myFamilyId;

}

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>字体属性</title>
	<style>
	  @font-face{
	    font-family: myFistFamily;
		src: url('Zzgf.otf');
	  }
	  
	  #p1 {
	    font-family: myFistFamily;
		font-size: 50px;
	  }
	  
	
	</style>
  </head>
  <body>
    
	<p id="p1">服务端字体，将字体样式放于服务器端。</p>
	
	
	 
  </body>
</html>

效果如下：

font-variant属性

font-variant属性指定小型大写字母，字母为大写，整体比其它文本更小。

书写：font-variant: small-caps;

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>字体属性</title>
	<style>
	  
	  #p1 {
	    font-variant: small-caps;
	  }
	  
	
	</style>
  </head>
  <body>
    
	<p id="p1">good morning,其它文本。</p>
	
	
	 
  </body>
</html>

效果如下：

字体属性缩写方式：

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

「已注销」

关注

0
点赞
踩
1

收藏

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

font-family属性font-family属性指定元素的字体类型。写法：font-family: "Microsoft YaHei"||黑体;注：若字体名称包含空格，则需用双引号括起来，如果是在style属性中书写，则用单引号括起来。常见字体名称：Microsoft YaHei(微软雅黑)，Simsun(宋体)，NSimsun(新宋体)，Simhei(黑体)，
复制链接

扫一扫