css字体属性

最新推荐文章于 2024-07-23 14:51:29 发布

您访问的用户不存在

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量155

点赞数 1

分类专栏：笔记文章标签： css html

本文链接：https://blog.csdn.net/weixin_45793329/article/details/107314534

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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属性将不起作用

您访问的用户不存在

关注

1
点赞
踩
0

收藏

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

css字体属性css fonts(字体) 属性用于定义字体系列,大小,粗细,样式(如斜体)1.字体系列css用font-family属性来定义文本的字体系列. <html> <head>  <title> 练习</title> <style> h2{ font-family: '微软雅黑';
复制链接

扫一扫

专栏目录